前言
现在网上文件上传组件随便一搜都是一大堆，不过看大家一般都在用uploadify这个来上传文件。由于项目需要，我在来试了一下。因为第一次使用，也遇到了很多问题，特此记录！
----------------------------------我是分割线---------------------------------我是分割线---------------------------------------------------
效果图：
前端代码【部分功能说明都加了注释】：
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="css/style.css" rel="stylesheet" type="text/css" /> <link href="uploadify/uploadify.css" rel="stylesheet" type="text/css" /> <script src="js/jquery.js" type="text/javascript"></script> <script src="uploadify/jquery.uploadify.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#uploadify").uploadify({ //指定swf文件 'swf': 'uploadify/uploadify.swf', //后台处理的页面 'uploader': 'uploadfile.ashx', //按钮显示的文字 'buttonText': '浏 览', //上传文件的类型 默认为所有文件 'All Files' ; '*.*' //在浏览窗口底部的文件类型下拉菜单中显示的文本 'fileTypeDesc': 'Image Files', //允许上传的文件后缀 'fileTypeExts': '*.gif; *.jpg; *.png;*.zip', //发送给后台的其他参数通过formData指定 //'formData': { 'someKey': 'someValue', 'someOtherKey': 1 }, //上传文件页面中，你想要用来作为文件队列的元素的id, 默认为false 自动生成, 不带# //'queueID': 'fileQueue', 'fileSizeLimit': 204800000, //选择文件后自动上传 'auto': false, //设置为true将允许多文件上传 'multi': true, //上传成功 'onUploadSuccess': function (file, data, response) { var obj = (new Function("return " + data))();//【json字符串转为json对象。】 $("#rep").append("<span>" + obj.Msg + "!</span>");//data为后台返回结果。 } }); }); </script> </head> <body> <form id="form1" runat="server"> <div> <div id="fileQueue"> </div> <input type="file" name="uploadify" id="uploadify" /> <p> <a href="javascript:$('#uploadify').uploadify('upload','*')">上传</a>| <a href="javascript:$('#uploadify').uploadify('cancel','*')">取消上传</a> </p> </div> <br /> <div id="rep">返回的结果：</div> </form> </body> </html>
javascript:$('#uploadify').uploadify('upload','*')：启用批量上传。
>关于大文件上传
在调试上传过程中，发现大文件（大于20M）就出现500错误了。我就想起应该是webconfig的请求内容大小的限制问题。应该按照如下设置：
<system.web> <compilation debug="true" targetFramework="4.0" /> <!--设置大文件请求--> <httpRuntime maxRequestLength="1073741824" executionTimeout="3600" /> </system.web>
服务器端代码如下：
public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; //接收上传后的文件 HttpPostedFile file = context.Request.Files["Filedata"]; //其他参数 //string somekey = context.Request["someKey"]; //string other = context.Request["someOtherKey"]; //获取文件的保存路径 string uploadPath = HttpContext.Current.Server.MapPath("UploadImages" + "\"); //判断上传的文件是否为空 if (file != null) { if (!Directory.Exists(uploadPath)) { Directory.CreateDirectory(uploadPath); } //保存文件 file.SaveAs(uploadPath + DateTime.Now.ToString("yyyyMMddHHmmsss") + file.FileName.Substring(file.FileName.LastIndexOf(".") - 1)); ResponseModel rm = new ResponseModel(); rm.Id = 1; rm.state = 0; rm.Msg = "成功"; context.Response.Write(Newtonsoft.Json.JsonConvert.SerializeObject(rm));//即传给前台的data } else { context.Response.Write("0"); //即传给前台的data } }
public class ResponseModel { public int Id { get; set; } public int state { get; set; } public string Msg { get; set; } }
其中上传成功后的返回对象可采用json序列化。然后返回给客户端调用。而在客户端调用的时候，建议先给返回的json字符串转换为json对象，这样可以方便使用。
var obj = (new Function("return " + data))();//data为返回的json字符串
希望本文可以给您带来帮助！