Fine Uploader（）是一个实现 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，下载地址：

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

服务器端实现改进版

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

相关博文：

图片上传结果演示

 

 

 

借助 .NET 4.0 新增的 Stream.CopyTo ()，可以轻松实现“流对流”保存上传文件，示例代码如下：

public ActionResult ProcessUpload(string filename){    using (var inputStream = Request.InputStream)    {        using (var flieStream = new FileStream(@"c:\temp\" + filename, FileMode.Create))        {            inputStream.CopyTo(flieStream);        }    }    return Json(new { success = true });}