利用uploadify+asp.net 实现大文件批量上传。

前言

现在网上文件上传组件随便一搜都是一大堆,不过看大家一般都在用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
            }
        }
upload.ashx.cs
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字符串

 

希望本文可以给您带来帮助!

 

posted @ 2015-08-13 16:18  Jaryleely  阅读(4508)  评论(5编辑  收藏  举报
TOP
学习,一直学习,就这样下去。。。