fineuploader是一款基于ajax实现文件上传的插件，具有以下有点：
A：支持文件上传进度显示.
B：文件拖拽浏览器上传方式
C：Ajax页面无刷新.
D：多文件上传.
F：跨浏览器.
E：跨后台服务器端语言.
GitHub下载地址：https://github.com/valums/file-uploader
现已更新地址到：https://github.com/FineUploader/fine-uploader
系在后目录结构如下
项目中引用fineuploader-3.3.1.css和fineuploader-3.3.1.min.js即可
上传测试页面：Demo.html
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>Fine Uploader Demo</title> <link href="../../App_Common/fineuploader/fineuploader-3.3.1.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="manual-fine-uploader"> </div> <button id="triggerUpload" onclick="Upload();" style="margin-top: 10px;"> Upload now </button> <script type="text/javascript" src="../../App_Common/fineuploader/fineuploader-3.3.1.js" ></script> <script type="text/javascript" src="../../App_Common/jquery-1.4.2.min.js" ></script> <script type="text/javascript"> $(document).ready(function(){ var manualuploader = new qq.FineUploader({ autoUpload :false, element: document.getElementById("manual-fine-uploader"), request: {endpoint: 'Handler.ashx'}, text: {uploadButton: '选择文件'}, validation:{allowedExtensions: ['jpeg', 'jpg', 'txt','rar','zip','doc','docx','xls','xlsx'],sizeLimit: 100*(1024*1024)}, callbacks: { onComplete: function (id, name, responseJSON) { if (responseJSON.success) { //$(".qq-upload-list").hide(); alert(name+"上传成功"); } } }, deleteFile:{ enabled: true, endpoint: 'Handler.ashx', }, debug: true }); $("#triggerUpload").click(function(){manualuploader.uploadStoredFiles();}); }); </script> </body> </html>
服务端接收：Handler.ashx
<%@ WebHandler Language="C#" Class="Handler" %> using System; using System.Collections.Generic; using System.Web; using System.IO; using System.Web.Script.Serialization; public class Handler : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; if (context.Request != null && context.Request.Files.Count > 0) { HttpPostedFile file = context.Request.Files["qqfile"];//上传文件对象 string uploadPath = context.Server.MapPath("~/UpLoad/QueOperation/"); if (file != null) { if (!Directory.Exists(uploadPath)) { Directory.CreateDirectory(uploadPath); } string ExtName = Path.GetExtension(file.FileName); string FileName = Path.GetFileNameWithoutExtension(file.FileName); //string fileName = "【" + FileName + "】" + DateTime.Now.ToString("yyyyMMddHHmmss") + ExtName; file.SaveAs(uploadPath + FileName + ExtName); context.Response.Write("{"success":"true"}"); } } } public bool IsReusable { get { return false; } } }
上传文件要因为js封装用到qq-template模板，系统自带三个这里就用默认模板
也可以将以下template直接方放入页面
<!-- This is a legacy template and is not meant to be used in new Fine Uploader integrated projects. Read the "Getting Started Guide" at http://docs.fineuploader.com/quickstart/01-getting-started.html if you are not yet familiar with Fine Uploader UI. --> <script type="text/template" id="qq-template"> <div class="qq-uploader-selector qq-uploader" qq-drop-area-text="Drop files here"> <div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container"> <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div> </div> <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone> <span class="qq-upload-drop-area-text-selector"></span> </div> <div class="qq-upload-button-selector qq-upload-button"> <div>Upload a file</div> </div> <span class="qq-drop-processing-selector qq-drop-processing"> <span>Processing dropped files...</span> <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span> </span> <ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals"> <li> <div class="qq-progress-bar-container-selector"> <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div> </div> <span class="qq-upload-spinner-selector qq-upload-spinner"></span> <span class="qq-upload-file-selector qq-upload-file"></span> <span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span> <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text"> <span class="qq-upload-size-selector qq-upload-size"></span> <button type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Cancel</button> <button type="button" class="qq-btn qq-upload-retry-selector qq-upload-retry">Retry</button> <button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">Delete</button> <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span> </li> </ul> <dialog class="qq-alert-dialog-selector"> <div class="qq-dialog-message-selector"></div> <div class="qq-dialog-buttons"> <button type="button" class="qq-cancel-button-selector">Close</button> </div> </dialog> <dialog class="qq-confirm-dialog-selector"> <div class="qq-dialog-message-selector"></div> <div class="qq-dialog-buttons"> <button type="button" class="qq-cancel-button-selector">No</button> <button type="button" class="qq-ok-button-selector">Yes</button> </div> </dialog> <dialog class="qq-prompt-dialog-selector"> <div class="qq-dialog-message-selector"></div> <input type="text"> <div class="qq-dialog-buttons"> <button type="button" class="qq-cancel-button-selector">Cancel</button> <button type="button" class="qq-ok-button-selector">Ok</button> </div> </dialog> </div> </script>