近来因为要做一个上传功能，而firefox又不能直接使用file这样的标签，所以试着用js来写了一个，结果发现代码太多，验证太复杂，而且效果也不理想。
相对的，jquery提供的这一套uploadify则相当好用，但是官方只提供了php版本的，表示有点遗憾，可是没关系，c#同样可以使用。下面写一个小的Demo，也是担心自己会忘记，在这做一个记录吧
首先下载 uploadify3.1
我们先写个html页面
1 <body> 2 <div> 3 <div id="fileQueue"></div> 4 <input type="file" name="uploadify" id='uploadify' value="" /> 5 <p> 6 <a href="javascript:$('#uploadify').uploadify('upload')">Start</a> 7 <a href="javascript:$('#uploadify').uploadify('cancel')">Cancel</a> 8 </p> 9 </div> 10 </body>
ok，页面完成之后，下面就是前奏了，我们需要导入相应的js和css样式，以及uploadify各参数的定义了，下面我们就来完成js的页面
1 <script src="JS/jquery-1.8.0.js" type="text/javascript"></script> 2 <link href="JS/uploadify.css" rel="stylesheet" type="text/css" /> 3 <script src="JS/jquery.uploadify-3.1.js" type="text/javascript"></script> 4 <script> 5 $(function () { 6 $("#uploadify").uploadify({ 7 //上传false 8 'swf': 'JS/uploadify.swf', 9 //后台业务处理 10 'uploader': 'UploadHandler.ashx', 11 //按钮 12 'buttonText': 'Upload Image', 13 //设置宽高 14 'height': 15, 15 'width': 80, 16 'All Files': '*.*', 17 //在浏览窗口底部的文件类型下拉菜单中显示的文本 18 'fileTypeDesc': 'Image Files', 19 'fileTypeExts': '*.gif;*.jpg;*.png', 20 'size': '5120KB', 21 //设置是否自动上传，选择完成后自动上传，这里我并没有自动上传 22 'auto': false, 23 //设置是否可以上传多个文件 24 'multi': false, 25 //上传成功后所执行的代码 26 'onUploadSuccess': function (file, data, response) { 27 $("#" + file.id).find('.data').html('上传完毕'); 28 }, 29 //上传失败时所执行的代码 30 'onUploadError': function (file, data, response) { 31 $('#' + file.id).find('.data').html('文件过大'); 32 }, 33 //开始上传时所执行的代码 34 'onUploadStart': function (file) { 35 alert("start"); 36 alert(file.name); 37 } 38 }); 39 }); 40 </script>
这里完成之后，我们就只差最后一步了，就是后台业务的处理，asp.net一般结合handler来使用，所以我们先创建一个uploadhandler.ashx文件
1 context.Response.ContentType = "text/plain"; 2 context.Response.Write("Hello World"); 3 HttpPostedFile file = context.Request.Files["Filedata"]; 4 //获取保存路径 5 string uploadPath = 6 HttpContext.Current.Server.MapPath("UploadImages" + "\"); 7 //判断文件是否为空 8 if (file != null) 9 { 10 if (!Directory.Exists(uploadPath)) 11 { 12 Directory.CreateDirectory(uploadPath); 13 } 14 //Save File 15 file.SaveAs(uploadPath + file.FileName); 16 //这里的返回值比较重要，1表示正确，0则是失败，成功后，会继续上传下一个文件 17 context.Response.Write("1"); 18 } 19 else { 20 context.Response.Write("0"); 21 }
说到这，功能便已经完成了，我发下我的文件结构图
