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

时间：2023-03-09 05:41:05
利用uploadify+asp.net 实现大文件批量上传。

前言

现在网上文件上传组件随便一搜都是一大堆，不过看大家一般都在用uploadify这个来上传文件。由于项目需要，我在来试了一下。因为第一次使用，也遇到了很多问题，特此记录！

----------------------------------我是分割线---------------------------------我是分割线---------------------------------------------------

效果图：

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

前端代码【部分功能说明都加了注释】：

<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(".") - ));

                ResponseModel rm = new ResponseModel();

                rm.Id = ;

                rm.state = ;

                rm.Msg = "成功";

                context.Response.Write(Newtonsoft.Json.JsonConvert.SerializeObject(rm));//即传给前台的data

            }

            else

            {

                context.Response.Write(""); //即传给前台的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字符串

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

相关文章