快捷導(dǎo)航

用Fine Uploader+ASP.NET MVC實(shí)現(xiàn)ajax文件上傳[代碼示例]

更新時(shí)間：2013年01月06日 17:58:23 作者：

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
腳本之家Fine Uploader下載地址 http://www.dbjr.com.cn/codes/70040.html
2. html代碼：

復(fù)制代碼代碼如下:

 
<!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# 代碼：

復(fù)制代碼代碼如下:

 
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)版

復(fù)制代碼代碼如下:

 
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 }); 
} 

圖片上傳結(jié)果演示