百度了很久，国内一直 找不到 使用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. poj1087&&hdu1526 最大流

    多源多汇. 比较明显的建图.对于电器,可以从源点与各个电器相连,容量为1,表示这个电器有1个,然后对于各种接头,那可以各个接头与汇点相连,容量为1,表示每个接头只能用一次. 然后对于能够相互转换的接头 ...

  2. FastAdmin CMS 内容管理插件标签文档

    FastAdmin CMS 内容管理插件标签文档 在CMS插件中的前端视图模板中有大量使用了自定义标签,我们在修改或制作模板的时候可以方便快捷的使用自定义标签来调用我们相关的数据. 标签库位于/add ...

  3. 利用IDEA构建springboot应用-构建好SpringBoot + SSM 框架

    一. 创建项目 选择 Spring Initiallizr 添加最基本的几个依赖 Web,MySQL,MyBatis,其他需求可以后续再添加 ; 数据库选择了 MySQL 二. 配置数据源 数据源中存 ...

  4. pandas数据框，统计某列或者某行数据元素的个数

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/sinat_38893241/articl ...

  5. selenium webdriver学习（二）————对浏览器的简单操作(转载JARVI)

    selenium webdriver学习(二)————对浏览器的简单操作 博客分类: Selenium-webdriver   selenium webdriver对浏览器的简单操作 打开一个测试浏览 ...

  6. H3C 命令行帮助特性（续）

  7. @noi.ac - 493@ trade

    目录 @description@ @solution@ @part - 1@ @part - 2@ @part - 3@ @part - 4@ @accepted code@ @details@ @d ...

  8. win10 + 独显 + Anaconda3 + tensorflow_gpu1.13 安装教程（跑bert模型）

    这里面有很多坑,最大的坑是发现各方面都装好了结果报错  Loaded runtime CuDNN library: 7.3.1 but source was compiled with: 7.4.1, ...

  9. SpringBoot使用logback输出日志并打印sql信息 --经典---

    最近在学习springboot以及一些springcloud插件的使用,其中发现默认的配置并不能打印一些有用的日志,所以需要自定义一些日志输出方式以便于查看日志排查问题,目前只整理了两种使用方式,如下 ...

  10. pytorch lstm crf 代码理解

    好久没有写博客了,这一次就将最近看的pytorch 教程中的lstm+crf的一些心得与困惑记录下来. 原文 PyTorch Tutorials 参考了很多其他大神的博客,https://blog.c ...