![[代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传](https://1200zi.500zi.com/uploadfile/img/14/840/89e9a71302ce4a17c1db29d88cbdd58d.jpg)
[代码示例]用Fine Uploader+ MVC实现ajax文件上传
原文 [代码示例]用Fine Uploader+ MVC实现ajax文件上传
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 UploaderjQuery Wrapper。下面看示例代码：
Web前端实现
1. 下载jQuery Plug-in Fine Uploader，下载地址：/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="/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. 浏览器中的显示效果
服务器 MVC 实现代码
Fine Uploader 的源代码中用 实现了一个 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 });}
相关博文：上传文件就这么简单：Request.InputStream to FileStream
图片上传结果演示
posted on -01-13 00:40 NET未来之路 阅读(...) 评论(...) 编辑 收藏
