[代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传
原文 [代碼示例]用Fine Uploader+ASP.NET MVC實(shí)現(xiàn)ajax文件上傳
Fine Uploader（http://fineuploader.com/）是一個(gè)實(shí)現(xiàn) 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，也就是說(shuō)不引用jquery.js，也可以正常使用。同時(shí)，它也提供了 jQuery Wrapper，可以方便地與jQuery集成。
這篇博文中的示例代碼用的就是?Fine Uploader?jQuery Wrapper。下面看示例代碼：
Web前端實(shí)現(xiàn)
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>代碼說(shuō)明：
a)?<div id="jquery-wrapped-fine-uploader"></div>用于顯示上傳按鈕
b) endpoint 設(shè)定的是上傳時(shí)服務(wù)端處理ajax請(qǐng)求的網(wǎng)址。
3. 瀏覽器中的顯示效果
服務(wù)器 ASP.NET MVC 實(shí)現(xiàn)代碼
Fine Uploader 的源代碼中用 VB.NET 實(shí)現(xiàn)了一個(gè) Controller（UploadController.vb），我們?cè)谑褂脮r(shí)改為了 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);}}}} }服務(wù)器端實(shí)現(xiàn)改進(jìn)版
public ActionResult ProcessUpload(string qqfile) {using (var inputStream = Request.InputStream){using (var flieStream = new FileStream(@"c:\temp\" + qqfile, FileMode.Create)){inputStream.CopyTo(flieStream);}}return Json(new { success = true }); }相關(guān)博文：上傳文件就這么簡(jiǎn)單：Request.InputStream to FileStream
圖片上傳結(jié)果演示
?
posted on 2014-01-13 00:40 NET未來(lái)之路 閱讀(...) 評(píng)論(...) 編輯 收藏轉(zhuǎn)載于:https://www.cnblogs.com/lonelyxmas/p/3516781.html
總結(jié)
以上是生活随笔為你收集整理的[代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 用802.11n 加速，将android
- 下一篇： 九度OJ 1434 今年暑假不AC