用Fine Uploader+ASP.NET MVC实现ajax文件上传[代码示例]

时间:2022-06-20 13:20:23

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. 浏览器中的显示效果 

用Fine Uploader+ASP.NET MVC实现ajax文件上传[代码示例]


服务器 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); 





服务器端实现改进版 

复制代码代码如下:


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


图片上传结果演示 

用Fine Uploader+ASP.NET MVC实现ajax文件上传[代码示例]