百度了很久,国内一直 找不到 使用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. poj 2229 【完全背包dp】【递推dp】

    poj 2229 Sumsets Time Limit: 2000MS   Memory Limit: 200000K Total Submissions: 21281   Accepted: 828 ...

  2. C# 从零开始写 SharpDx 应用 画三角

    原文:C# 从零开始写 SharpDx 应用 画三角 版权声明:博客已迁移到 https://blog.lindexi.com 欢迎访问.如果当前博客图片看不到,请到 https://blog.lin ...

  3. Python基础:16面向对象概述

    1:在版本2.2 中,Python社区最终统一了类型(type)和类(class),新式类具备更多高级的OOP特性,扮演了一个经典类(旧式类)超集的角色,后者是Python 诞生时所创造的类对象. 2 ...

  4. shell 解析json

    未完待续 ### 解析api json文件为csv文件 cd /api ` do id=$(echo ${i}|sed 's/.html//') echo -n "${id}|" ...

  5. 11-1 css属性选择器

    一 基础选择器 标签选择器:选择的标签的‘共性’,而不是特性 div{}.ul{}.ol{}.form{} 类选择器:.box{} id选择器:#box{} 只能选择器的特性,主要是为了js *通配符 ...

  6. Pytorch使用tensorboardX网络结构可视化。超详细!!!

    https://www.jianshu.com/p/46eb3004beca 1 引言 我们都知道tensorflow框架可以使用tensorboard这一高级的可视化的工具,为了使用tensorbo ...

  7. oracle函数 LENGTH(c1)

    [功能]返回字符串的长度; [说明]多字节符(汉字.全角符等),按1个字符计算 [参数]C1 字符串 [返回]数值型 [示例] SQL> select length('高乾竞'),length( ...

  8. Top 10 open source projects of 2015

    Top 10 open source projects of 2015 Posted 15 Dec 2015Jen Wike Huger (Red Hat)Feed 188 up 31 comment ...

  9. :after选择器-----分割线

    分割线: 让span中的文字覆盖分割线,需要:给div和span设置同样的background-color,并且给span设置z-index. 接下来就是margin和padding的调整了. 效果: ...

  10. github下载慢,轻松提速教程

    获取github的IP地址访问:https://www.ipaddress.com/ 网址 依次获取以下三个网址的IP github.comgithub.global.ssl.fastly.netco ...