利用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循环依次传输.具体实现代码比 ...

随机推荐

Java NIO 同步非阻塞
同步非阻塞IO (NIO) NIO是基于事件驱动思想的,实现上通常采用Reactor(http://en.wikipedia.org/wiki/Reactor_pattern)模式,从程序角度而言,当 ...
react native windows开发环境搭建(二)
上一篇中介绍了本地服务器端环境的安装,使用已经编译好的apk程序,设置ip地址,就可以看到welcome界面,并且可以对程序做出修改以及调试. 为了扩展和发布应用还需要能编译loader程序,这里介 ...
烂泥：mysql帮助命令使用说明
本文由秀依林枫提供友情赞助,首发于烂泥行天下. 在安装.管理和使用mysql过程中,你是不是需要记忆很多的mysql命令.而且对于新手来说,很不多的命令不知道该如何应用,对于老手来说很多命令时间长了忘 ...
linux基础-第八单元正文处理命令及tar命令
第八单元正文处理命令及tar命令使用cat命令进行文件的纵向合并两种文件的纵向合并方法归档文件和归档技术归档的目的什么是归档 tar命令的功能 tar命令的常用选项使用tar命令创建.查 ...
[Computer structure] Written Notes
To some extent, taking notes using my pen and pencil is also an interesting thing! bingo! ~ 2016-03- ...
CKEDITOR最新版不能上传图片的解决
文献:http://bbs.csdn.net/topics/390883077 代码例子:http://download.csdn.net/download/itmyhome/7851265 1.原先 ...
关闭 Sublime Text 3 自动更新
打开Submine Text,找到Preferences -> Settings-User写入 "update_check":false,PS:一定要加逗号.不会可以看图片 ...
JavaScript RegExp 对象
JavaScript RegExp 对象 RegExp 对象用于规定在文本中检索的内容. 什么是 RegExp? RegExp 是正则表达式的缩写. 当您检索某个文本时,可以使用一种模式来描述要检索的 ...
file文件的操作
<?php //echo readfile('D:\\123.txt');//读取文件内容第一种方式,返回字符串,但是带有长度 echo '<br>'; //var_dump(fil ...
IDF实验室WORD隐写术
上帝也哭泣http://ctf.idf.cn/index.php?g=game&m=article&a=index&id=48 下载下来,发现是一个word文档,看来信息应该就 ...

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

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

随机推荐

热门专题