百度了很久,国内一直 找不到 使用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. 四.使用JDBC进行批处理操作

    1 create table testbatch 2 ( 3 id int primary key, 4 name varchar(20) 5 ); 在实际的项目开发中,有时候需要向数据库发送一批SQ ...

  2. Spring MVC 关于controller的字符编码问题

    在使用springMVC框架构建web应用,客户端常会请求字符串.整型.json等格式的数据,通常使用@ResponseBody注解使 controller回应相应的数据而不是去渲染某个页面.如果请求 ...

  3. iOS开发周报-- 第一期

    从Java转iOS第一个项目总结 http://www.cocoachina.com/ios/20150417/11595.html icon设计探讨:图标,文字,还是图标加文字? http://ww ...

  4. Java练习 SDUT-2761_编码

    编码 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 给你一个由大写字母组成的组成的字符串,你可以用如下规则对其进行编码 ...

  5. Flask学习之八 关注、联系人和好友

    英文博客地址:http://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-viii-followers-contacts-and- ...

  6. MySQL性能分析, mysql explain执行计划详解

    MySQL性能分析 MySQL性能分析及explain用法的知识是本文我们主要要介绍的内容,接下来就让我们通过一些实际的例子来介绍这一过程,希望能够对您有所帮助. 1.使用explain语句去查看分析 ...

  7. jQuery 无刷新评论

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 同一个C语言工程不同C文件之间的函数互相调用问题

    定义一个function.h文件来声明这些函数: //#ifndef __FUNCTION_H__//#define __FUNCTION_H__   int fun(int,int);   int ...

  9. 通过GDB重新获得进程的输出

    有时通过SecureCRT或者Putty远程ssh到主机上执行某个进程,因长时间没有交互导致ssh断链,此时该进程由init进程收留.该进程的输出也就无法获得了. 这种情况下,可以利用gdb重新获得该 ...

  10. linux lvm删除导致无法启动

    要想编辑/etc/fstab文件,我们需要在系统中重新挂载根目录,使其具有可读写状态,使用如下命令: mount -o remount,rw / 该条命令的作用是,以可读写的形式重新挂载根分区. 然后 ...