理清fineuploader无刷新上传的一些事
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实现
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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/