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

前言

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

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

效果图：

启用批量上传开关
大文件上传时的webconfig配置
如何处理上传结果返回的数据。

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

<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字符串

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

利用uploadify+asp.net 实现大文件批量上传。的更多相关文章

带进度条的文件批量上传插件uploadify
有时项目中需要一个文件批量上传功能时,个人认为uploadify是快速简便的解决方案. 先上效果图: 一. 下载uploadify 从官网下载uploadify的Flash版本(Flash版本免费,另 ...
利用blob对象实现大文件分片上传
首先说分片上传,我们在进行文件上传的时候,因为服务器的限制,会限制每一次上传到服务器的文件大小不会很大,这个时候我们就需要把一个需要上传的文件进行切割,然后分别进行上传到服务器. 假如需要做到这一步, ...
文件批量上传-统一附件管理器-在线预览文件(有互联网和没有两种)--SNF快速开发平台3.0
实际上在SNF里使用附件管理是非常简单的事情,一句代码就可以搞定.但我也要在这里记录一下统一附件管理器能满足的需求. 通用的附件管理,不要重复开发,调用尽量简洁. 批量文件上传,并对每个文件大小限制, ...
使用webuploader组件实现大文件分片上传，断点续传
本人在2010年时使用swfupload为核心进行文件的批量上传的解决方案.见文章:WEB版一次选择多个文件进行批量上传(swfupload)的解决方案. 本人在2013年时使用plupload为核心 ...
jquery文件批量上传控件Uploadify3.2(java springMVC)
人比較懒有用为主不怎么排版了先放上Uploadify的官网链接:http://www.uploadify.com/ -->里面能够看到PHP的演示样例,属性说明,以及控件下载地址.分f ...
文件批量上传的工具，要实现暂停继续、断点续传等功能（使用QtNetwork和QHttpMultiPart，和定时器检查超时）
最近在做一个文件批量上传的工具,要实现暂停继续.断点续传等功能.利用Qt自带的QtNetwork模块,完成这些需求并没有费多少周章,主要思路就是将文件分块,然后用while循环依次传输.具体实现代码比 ...

随机推荐

摆脱npm的网络问题: 淘宝npm镜像
在使用npm install的时候, 经常会因为网络问题, 各种安装不顺利, 一个字'烦躁'. 自从遇上淘宝npm之后,执行cnpm install之后, 怎一个'快'字了得. 闲话不多说, 直接上干 ...
Android 横竖屏切换小结
(自己体会:每次横竖屏自动切时都会run Activity的onCreate,即相当后重新进入Activity初始化一样:) 转自:http://www.cnblogs.com/franksunny/ ...
EarthWarrior3D游戏ios源码
这是一款不错的ios源码源码,EarthWarrior3D游戏源码, 并且游戏源代码支持多平台. 适用于cocos v2.1.0.0版本源码下载:http://code.662p.com/view/ ...
html特殊字符的html，js，css写法汇总
⇠ 箭头类符号 UNICODE 符号 UNICODE HTML JS CSS HTML JS CSS ⇠ &#8672 \u21E0 \21E0 ⇢ &#8674 \u21E2 \ ...
[转]12篇学通C#网络编程——第二篇 HTTP应用编程（上）
本文转自:http://www.cnblogs.com/huangxincheng/archive/2012/01/09/2316745.html 我们学习网络编程最熟悉的莫过于Http,好,我们就从 ...
ITer的七夕节，你的情人在哪里（2015-08-19）
自写<一个程序猿的生命周期>连载以来,迎来第一个七夕节,打算写篇文章纪念一下.我主张过中国自己的节日的,也不反对过其他国家的节日,但是要搞清楚其他国家节日的由来,不要把别人的鬼节当成我们的 ...
Beyond IT
Know Yourself <开讲啦> 20160306 潘建伟:探索的动机
洛谷⑨月月赛Round2 P3392涂国旗[DP]
题目描述某国法律规定,只要一个由N*M个小方块组成的旗帜符合如下规则,就是合法的国旗.(毛熊:阿嚏——) 从最上方若干行(>=1)的格子全部是白色的. 接下来若干行(>=1)的格子全部是 ...
NOIP2015子串[序列DP]
题目背景无题目描述有两个仅包含小写英文字母的字符串 A 和 B.现在要从字符串 A 中取出 k 个互不重叠的非空子串,然后把这 k 个子串按照其在字符串 A 中出现的顺序依次连接起来得到一个 ...
poj1001 Exponentiation 大数的幂
Description Problems involving the computation of exact values of very large magnitude and precision ...

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

利用uploadify+asp.net 实现大文件批量上传。的更多相关文章

随机推荐

热门专题