转载，JS实现上传看得不多，.NET直接拖控件太LOW
http://blog.csdn.net/xuexiaodong009/article/details/45556431
ajax已经很普遍了，但使用ajax上传文件自己却一直都没有涉及，我只知道挺复杂的，上传文件不同于上传一般的表单数据，必须特殊处理，知道一般ajax使用上传都是应用一个虚拟的iframe,但由于项目需要，在网上找了找，没想到找到了两个支持ajax上传文件的jquery插件，jquery.uploadify.js和dropzone.min.js两个都可以实现ajax上传文件，效果也不错。
这种上传方式，使用了Flash，因此需要引用一个特殊的js文件swfobject.js，低版本的需要引用，高版本的这个文件已经包含在jquery.uploadify.js中了。另外低版本的参数和高版本的参数也不太一样了。
- <htmlxmlns="http://www.w3.org/1999/xhtml">
- headrunat="server">
- title></scriptsrc="Scripts/jquery-1.8.0.min.js"type="text/javascript"scriptscriptsrc="Styles/jquery.uploadify.js"type="text/javascript"linkhref="Styles/uploadify.css"rel="stylesheet"type="text/css"/>
- scripttype="text/javascript" $(document).ready(function(){
- $("#uploadify").uploadify({
- swf:'Styles/uploadify.swf',
- uploader:'Handler1.ashx?OperationType=upfile',//后台的处理地址
- fileTypeDesc:'请选择excel文件',248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> buttonText:'请选择excel文件',
- fileTypeExts:'*.xls',248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> 'auto':false,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> onSelectError:function(file,errorCode,errorMsg){
- switch(errorCode){
- case-100:
- alert("上传的文件数量已经超出系统限制的"+$('#uploadify').uploadify('settings','queueSizeLimit')+"个文件！");
- break;
- case-110:
- alert("文件["+file.name+"]大小超出系统限制的"+$('#uploadify').uploadify('settings','fileSizeLimit')+"大小！");
- break;
- case-120:
- alert("文件["+file.name+"]大小异常！");
- case-130:
- alert("文件["+file.name+"]类型不正确！");
- }
- },108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> onFallback:function(){
- alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试。");
- },248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> //上传到服务器，服务器返回相应信息到data里
- onUploadSuccess:function(file,data,response){
- alert(data);
- onSelect:function(fileObj){
- alert("文件名："+fileObj.name+"\r\n"+
- "文件大小："+fileObj.size+"\r\n"+
- "创建时间："+fileObj.creationdate+"\r\n"+
- "最后修改时间："+fileObj.modificationdate+"\r\n"+
- "文件类型："+fileObj.type
- );
- });
- });
- functiondoUplaod(){
- $('#uploadify').uploadify('upload','*');
- }
- functioncloseLoad(){
- $('#uploadify').uploadify('cancel',0); background-color:inherit; font-weight:bold">headbodyformid="form1"runat="server"divdivid="fileQueue"inputtype="file"name="uploadify"id="uploadify"pahref="javascript:doUplaod()">上传a>|
- ahref="javascript:closeLoad()">取消上传formhtml>
Uploadify v2.1.0的写法
由于没有swfobject.js，需要添加引用
