前言

现在网上文件上传组件随便一搜都是一大堆，不过看大家一般都在用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(".") - ));

                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 实现大文件批量上传。的更多相关文章

  1. 带进度条的文件批量上传插件uploadify

    有时项目中需要一个文件批量上传功能时,个人认为uploadify是快速简便的解决方案. 先上效果图: 一. 下载uploadify 从官网下载uploadify的Flash版本(Flash版本免费,另 ...

  2. 利用blob对象实现大文件分片上传

    首先说分片上传,我们在进行文件上传的时候,因为服务器的限制,会限制每一次上传到服务器的文件大小不会很大,这个时候我们就需要把一个需要上传的文件进行切割,然后分别进行上传到服务器. 假如需要做到这一步, ...

  3. 文件批量上传-统一附件管理器-在线预览文件(有互联网和没有两种)--SNF快速开发平台3.0

    实际上在SNF里使用附件管理是非常简单的事情,一句代码就可以搞定.但我也要在这里记录一下统一附件管理器能满足的需求. 通用的附件管理,不要重复开发,调用尽量简洁. 批量文件上传,并对每个文件大小限制, ...

  4. 使用webuploader组件实现大文件分片上传，断点续传

    本人在2010年时使用swfupload为核心进行文件的批量上传的解决方案.见文章:WEB版一次选择多个文件进行批量上传(swfupload)的解决方案. 本人在2013年时使用plupload为核心 ...

  5. 百度Webuploader 大文件分片上传(.net接收)

    版权所有 2009-2018荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webapp/up6.2/in ...

  6. 使用原生Java Web来实现大文件的上传

    版权所有 2009-2018荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webapp/up6.2/in ...

  7. Java实现浏览器端大文件分片上传

    版权所有 2009-2018荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webapp/up6.2/in ...

  8. jquery文件批量上传控件Uploadify3.2(java springMVC)

    人比較懒  有用为主 不怎么排版了 先放上Uploadify的官网链接:http://www.uploadify.com/  -->里面能够看到PHP的演示样例,属性说明,以及控件下载地址.分f ...

  9. 文件批量上传的工具，要实现暂停继续、断点续传等功能（使用QtNetwork和QHttpMultiPart，和定时器检查超时）

    最近在做一个文件批量上传的工具,要实现暂停继续.断点续传等功能.利用Qt自带的QtNetwork模块,完成这些需求并没有费多少周章,主要思路就是将文件分块,然后用while循环依次传输.具体实现代码比 ...

随机推荐

  1. 打印出所有的 "水仙花数 "，所谓 "水仙花数 "是指一个三位数，其各位数字立方和等于该数本身。例如：153是一个 "水仙花数 "，因为153=1的三次方＋5的三次方＋3的三次方。

    ---恢复内容开始--- ---恢复内容结束---

  2. 0022 Java学习笔记-面向对象-继承、多态、组合

    继承的特点 单继承:每个子类最多只有一个直接父类,注意是直接父类,间接父类个数不限 注意父类的概念:A-->B-->C-->D,在这里,ABC都是D的父类,C是D的直接父类,AB是D ...

  3. Solr术语介绍:SolrCloud,单机Solr,Collection,Shard,Replica,Core之间的关系

    Solr有一堆让人发晕的术语如:collections,shards,replicas,cores,config sets. 在了解这些术语之前需要先做做如下功课: 1)什么是倒排索引? 2)搜索引擎 ...

  4. 浴室随想——RogueLike随想

    好玩的RogueLike 0 不同的追求 1 从追求中寻找商机 2 更的直接方法 3 我的追求 4 我的方法 5 好玩的RogueLike RogueLike游戏很好玩,因为你永远不知道接下来会发生什 ...

  5. 大话设计模式C++版——建造者模式

    日常做菜的过程中,经常会有忘记放盐或者放2次盐的经历,最后导致好好的一盘菜让大家无从下口.这个时候就需要用到建造者模式来规范炒菜的过程,来保证每一道菜都会经历加油.放食物.放盐.放味精这4道基本的工序 ...

  6. position&containing block

    一.包含块(Containing Block) 要讲position,首先就涉及到一个概念:包含块. 1.包含块介绍 包含块简单理解就是一个定位参考块,就是"大盒子里套小盒子"中那 ...

  7. [转]大白话系列之C#委托与事件讲解(三)

    本文转自:http://www.cnblogs.com/wudiwushen/archive/2010/04/21/1717378.html [我希望大家在看完文章的时候,多做做练习,自己也可以想个场 ...

  8. WinCE项目应用之RM905a+医用放射性核素活度计

    RM905a+医用放射性核素活度计大概是我做的第一个WinCE项目,RM905a的升级版.RM905a是曾经的老大LZF 2000年左右的作品,基于51单片机开发,数码管显示,稳定可靠,好似目前还在生 ...

  9. file文件的操作

    <?php //echo readfile('D:\\123.txt');//读取文件内容第一种方式,返回字符串,但是带有长度 echo '<br>'; //var_dump(fil ...

  10. [No000007]搜索引擎以图搜图的原理

    之前,Google把"相似图片搜索"正式放上了首页. 你可以用一张图片,搜索互联网上所有与它相似的图片.点击搜索框中照相机的图标. 一个对话框会出现. 你输入网片的网址,或者直接上 ...