百度了很久，国内一直 找不到 使用jquery file upload 插件 +asp.net 的相关代码
一开始使用 jquery uploadify ，一款基于 flash的插件，但是不支持 Safari浏览器 (苹果设备没戏了)。
于是想换 纯js或jquery的插件，但是 苦苦没 找到，不知道大家都用什么好方法实现。
于是 开始下面的 代码。。。
 
下面一些js里面的 分析是 自己调试 + 看源码得出的结论
非官方api(没找见) 的结果，只是为了满足自己的项目，没有深究。
如有不正确，希望指正
 
basic.html

<!DOCTYPE HTML>
<html lang="en">
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/jquery.fileupload.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script src="js/jquery.fileupload-process.js"></script>
<script src="js/jquery.fileupload-validate.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function () {
var url = '/Handler1.ashx?folder=/File/';
$('#fileupload').fileupload({
url: url,
dataType: 'json',
//如果有格式需求，可把里面 的 gif|jpe?g|png 替换成相应格式的文件
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i
}).on('fileuploaddone', function (e, data) {
//成功：handler中返回 json对象
//这里的 result 为你再handler中 返回的 json对象
alert(data.result.name);
}).on('fileuploadfail', function (e, data) {
//失败： 如果handler没有 返回 对象，则 会执行 这个 函数
var file = data.files[0];
alert(file.name);
}).on('fileuploadprocessalways', function (e, data) {
//格式判断
//1.引用上面的paocess.js validate.js
//2.如果格式不正确，执行该函数
var index = data.index, file = data.files[index];
if (file.error) {
alert(file.name);
alert(file.error); //error信息在 validate.js中，可以自己修改
}
});

})
</script>
</head>
<body>
<pre>
1.input控件如果 不加 multiple属性，则为单文件上传
2.bootstrap.min.css bootstrap.min.js
这个样式 是bootstrap的样式，如果有需求再引用，主要是为了好看
3.详细的返回方法见代码里面
</pre>
<span class="btn btn-success fileinput-button"><i class="glyphicon glyphicon-plus"></i>
<span>Select files...</span>
<input id="fileupload" type="file" name="files[]" multiple="multiple">
</span>
<div id="files" class="files">
</div>
</body>
</html>

 

handler

using System.IO;
using System.Web;

namespace NmsWebJQueryFileUpload
{
/// <summary>
/// Handler1 的摘要说明
/// </summary>
public class Handler1 : IHttpHandler
{
public bool IsReusable
{
get
{
return false;
}
}

public void ProcessRequest(HttpContext context)
{
HttpPostedFile uploadedfile = context.Request.Files[0];
string FileName = uploadedfile.FileName;
string FileType = uploadedfile.ContentType;
int FileSize = uploadedfile.ContentLength;
FileInfo info = new FileInfo(FileName);
string folderFullPath = context.Server.MapPath(context.Request["folder"]);
if (!Directory.Exists(folderFullPath))
{
Directory.CreateDirectory(folderFullPath);
}
uploadedfile.SaveAs(folderFullPath + "\\" + info.Name);
context.Response.ContentType = "text/plain";

//重点这里一定要返回 一个 对象。否则 html页面会认为请求错误的
context.Response.Write("{\"name\":\"" + info.Name + "\",\"url\":\"" + FileType + "\",\"size\":\"" + FileSize + "\"}");

}
}
}

所用的 jquery file upload 为 官网当前 时间 最新 

jquery file upload + asp.net 异步多文件上传的更多相关文章

  1. 定制jQuery File Upload为微博式单文件上传

    日志未经声明,均为AlloVince原创.版权采用『 知识共享署名-非商业性使用 2.5 许可协议』进行许可. jQuery File Upload是一个非常优秀的上传组件,主要使用了XHR作为上传方 ...

  2. jquery ajax file upload NET MVC 无刷新文件上传

    网上有各种各样的文件上传方法,有基于JS框架的.也有基于flash swf插件的. 这次分享一个比较简单而且实用能快速上手的文件上传方法,主要步骤: 1.引用Jquery包,我用的是jquery-1. ...

  3. blueImp/jQuery file upload 的正确用法（限制上传大小和文件类型）

    这个插件太出名了,几乎能完成所有能想象的到的效果,包括进度条.拖拽.甚至现在已经完美支持图片视频等的处理,三个字形容就是屌爆了.最近在做上传这一部分,发现网上对于上传文件大小的限制和类型检测等的方法都 ...

  4. Asp.net mvc 大文件上传 断点续传

    Asp.net mvc 大文件上传 断点续传 进度条   概述 项目中需要一个上传200M-500M的文件大小的功能,需要断点续传.上传性能稳定.突破asp.net上传限制.一开始看到51CTO上的这 ...

  5. MVC图片上传、浏览、删除 ASP.NET MVC之文件上传【一】（八） ASP.NET MVC 图片上传到服务器

    MVC图片上传.浏览.删除   1.存储配置信息 在web.config中,添加配置信息节点 <appSettings> <add key="UploadPath" ...

  6. iOS开发之结合asp.net webservice实现文件上传下载

    iOS开发中会经常用到文件上传下载的功能,这篇文件将介绍一下使用asp.net webservice实现文件上传下载. 首先,让我们看下文件下载. 这里我们下载cnblogs上的一个zip文件.使用N ...

  7. ASP.NET中的文件上传大小限制的问题

    一.文件大小限制的问题 首先我们来说一下如何解决ASP.NET中的文件上传大小限制的问题,我们知道在默认情况下ASP.NET的文件上传大小限制为2M,一般情况下,我们可以采用更改WEB.Config文 ...

  8. jquery插件课程2 放大镜、多文件上传和在线编辑器插件如何使用

    jquery插件课程2 放大镜.多文件上传和在线编辑器插件如何使用 一.总结 一句话总结:插件使用真的还是比较简单的,引包,初始化,配置参数(json),配置数据(json),而后两步不是必须的.而且 ...

  9. Asp.net mvc 大文件上传 断点续传 进度条

    概述 项目中需要一个上传200M-500M的文件大小的功能,需要断点续传.上传性能稳定.突破asp.net上传限制.一开始看到51CTO上的这篇文章,此方法确实很不错,能够稳定的上传大文件,http: ...

随机推荐

  1. iOS 后台定位

    http://www.cocoachina.com/ios/20150724/12735.html 前言 之前的文章说过 我现在做的是LBS定位的社交APP 其中主要的一个功能就是能够实时定位社交圈中 ...

  2. oracle函数的分类

    v  单行函数:对每一行输入值进行计算,得到相应的计算结果,返回给用户,也就是说,每行作为一个输入参数,经过函数计算得到每行的计算结果. 比如select length(ename) from emp ...

  3. NDK(1)简介

    AndroidNDK Android NDK 是在SDK前面又加上了“原生”二字,即Native Development Kit,因此又被Google称为“NDK”. Android程序运行在Dalv ...

  4. 阿里云BaaS：降低区块链应用门槛，用技术构建商业互信

    5月8日,阿里云召开区块链服务(BaaS)商业化发布会,会上对BaaS产品.业务应用场景及生态策略进行了全面解读. 对于广大IT服务商和开发者而言,构建区块链应用存在三大痛点问题:成本高,研发投入大. ...

  5. header发送Cookie

    Cookie传达给客户端的原理 平时执行setcookie('key1', 'value1');这样的代码时,浏览器就会收到cookie并保存,但我们并不能从echo出去的内容中看到cookie内容 ...

  6. android学习——android 常见的错误 和 解决方法

    1. Application does not specify an API level requirement! 解决方法:AndroidManifest.xml中 加入: <uses-sdk ...

  7. ansible api 通过python 方式调用

    pip3 install ansible Linux下面安装 Windows 安装没成功 from ansible.parsing.dataloader import DataLoader #读取ya ...

  8. 重置Mysql自增列的开始序号

    ALTER TABLE  TableName AUTO_INCREMENT = 5; 代表重新从5开始(包括5)

  9. 使用jquery.form.js的ajaxsubmit方法提交数据的Bug

    周五同事遇到一个很奇怪的问题,调到下班,虽然问题解决了,但是不知道问题的具体原因,回来翻了翻代码,才发现症结所在,下面就分享出来,供遇到同样问题的同行们参考: 先把问题描述一下,做的功能是使用ajax ...

  10. js原生继承几种方式

    js原生继承 js本身并没有继承和类的概念,本质上是通过原型链(prototype)的形式实现的. 1.先写两个构造函数Parent和Child,用于将Child继承Parent function P ...