Fine Uploader（http://fineuploader.com/）是一個實現 ajax 上傳檔案的 Javascript 組件。
This project attempts to achieve a user-friendly file-uploading experience over the web. It's built as a Javascript plugin for developers looking to incorporate file-uploading into their website.
Fine Uploader 不依賴於 jQuery，也就是說不引用jquery.js，也可以正常使用。同時，它也提供了 jQuery Wrapper，可以方便地與jQuery整合。
這篇博文中的範例程式碼用的就是 Fine Uploader jQuery Wrapper。下面看範例程式碼：
Web前端實現
1. 下載jQuery Plug-in Fine Uploader，下載地址：https://github.com/valums/file-uploader/wiki/Releases
2. html代碼：
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>圖片上傳 - 部落格園</title> <link href="/css/fineuploader.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="/scripts/jquery.fineuploader-3.0.min.js"></script> </head><body> <div id="jquery-wrapped-fine-uploader"></div> <script> $(function () { $('#jquery-wrapped-fine-uploader').fineUploader({ request: { endpoint: '/ImageUploader/ProcessUpload' } }); }); </script></body></html>
代碼說明：
a) <div id="jquery-wrapped-fine-uploader"></div>用於顯示上傳按鈕
b) endpoint 設定的是上傳時服務端處理ajax請求的網址。
3. 瀏覽器中的顯示效果
伺服器 ASP.NET MVC 實現代碼
Fine Uploader 的原始碼中用 VB.NET 實現了一個 Controller（UploadController.vb），我們在使用時改為了 C# 代碼：
using System;using System.Collections.Generic;using System.IO;using System.Linq;using System.Web;using System.Web.Mvc; namespace CNBlogs.Upload.Web.Controllers{ public class ImageUploaderController : Controller { const int ChunkSize = 1024 * 1024; public ActionResult Upload() { return View(); } public ActionResult ProcessUpload(string qqfile) { using (var stream = Request.InputStream) { using (var br = new BinaryReader(stream)) { WriteStream(br, qqfile); } } return Json(new { success = true }); } private void WriteStream(BinaryReader br, string fileName) { byte[] fileContents = new byte[] { }; var buffer = new byte[ChunkSize]; while (br.BaseStream.Position < br.BaseStream.Length - 1) { if (br.Read(buffer, 0, ChunkSize) > 0) { fileContents = fileContents.Concat(buffer).ToArray(); } } using (var fs = new FileStream(@"C:\\temp\\" + DateTime.Now.ToString("yyyyMMddHHmmSS") + Path.GetExtension(fileName).ToLower(), FileMode.Create)) { using (var bw = new BinaryWriter(fs)) { bw.Write(fileContents); } } } }}
更多精彩內容：http://www.bianceng.cnhttp://www.bianceng.cn/webkf/ajax/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
