1.fineuploader是一款不依赖与jquery的异步无刷新上传组件，fineuploader采用ajax方式实现对文件上传，返回值都是以json的格式，对后台服务器操作和前端dom对象一些操作代码集中在javascript脚本中，这样集成使fineuploader使用非常简单，使用的时候只需要添加（fineuploader-3.5.0.css）与（jquery.fineuploader-3.9.1.js）即可实现上传。
2.fineuploader也有自身的一些特点：1.支持文件上传进度显示，2.文件拖拽浏览器上传方式、3.Ajax页面无刷新、4.多文件同时上传、5.跨浏览器、6.夸后台服务器端语言
3.供上实例demo来讲解fineuploader
$(function () { //定义容器 var container = $("#uploadContainer"); var uploader = $(‘.uploadContainer-button‘, container).fineUploader({ request: { endpoint: url, accessKey: "AKIAJB6BSMFWTAXC5M2Q" }, //是否选中后自动上传 autoUpload: false, //验证操作包含文件格式、大小 validation: { //控制上传文件的后缀格式数组 allowedExtensions: [‘jpeg‘, ‘jpg‘, ‘png‘, ‘xls‘, ‘xlsx‘, ‘pdf‘, ‘txt‘, ‘doc‘, ‘docx‘, ‘rar‘, ‘zip‘], //控制上传文件大小 sizeLimit: 100 * (1024 * 1024) // 200 kB = 200 * 1024 bytes }, //是否支持多文件同时上传 multiple: true, //上传按钮文本 text: { uploadButton: ‘上传‘ }, //上传按钮模板 template:‘‘ //responseJSON 用来在上传操作完成后返回的json格式的数据 //fileName 上传文件的文件名 //Id 表示第几个开始上传的文件 默认从0开始计数 }).on(‘complete‘, function (event, id, fileName, responseJson) { alert(responseJson.success); } }); });
后端接收代码：.Net实现
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.IO; using System.Web.Script.Serialization; namespace WebApplication2 { /// <summary> /// Handler1 的摘要说明 /// </summary> public class Msg { public bool success { get; set; } } public class Handler1 : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string fileName = context.Request["qqfile"]; using (var inputStream = context.Request.InputStream) { using (var flieStream = new FileStream(@"c:\temp\" + fileName, FileMode.Create)) { inputStream.CopyTo(flieStream); } } context.Response.Write(new JavaScriptSerializer().Serialize(new Msg() { success=true})); } public bool IsReusable { get { return false; } } } }
Web.Config配置：
<configuration>
<system.web>
<compilation debug="true" targetFramework="4.0" />
<httpRuntime maxRequestLength = "999999999" useFullyQualifiedRedirectUrl="true"/>
</system.web>
</configuration>
fineUploader:
manualuploader = new qq.FineUploader({ element: document.getElementById("manual-fine-uploader"), request: { endpoint: ‘server/success.html‘ }, template: "qq-template-manual-noedit", autoUpload: false, debug: true, demoMode: true // Undocumented -> Only for the gh-pages demo website }); qq(document.getElementById("triggerUpload")).attach("click", function() { manualuploader.uploadStoredFiles(); });
原文：http://www.cnblogs.com/benpao/p/4338555.html