• 利用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字符串

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

  • 相关阅读:
    poj3635(最短路)
    poj 3041( 最大匹配)
    poj 3522(生成树)
    poj 1904(强连通分量)
    poj 2446(二分匹配)
    poj 2400(最小权匹配)
    poj 2175(费用流消圈)
    poj 1256(搜索)
    poj 2195(最小费用流)
    poj 3613(最短路)
  • 原文地址:https://www.cnblogs.com/Jaryleely/p/uploadify.html
Copyright © 2020-2023  润新知