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前端實現(xiàn)
1. 下載jQuery Plug-in Fine Uploader，下載地址：https://github.com/valums/file-uploader/wiki/Releases
腳本之家Fine Uploader下載地址 https://www.jb51.net/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>
代碼說明：
a) div id="jquery-wrapped-fine-uploader">/div>用于顯示上傳按鈕
b) endpoint 設(shè)定的是上傳時服務(wù)端處理ajax請求的網(wǎng)址。
3. 瀏覽器中的顯示效果
服務(wù)器 ASP.NET MVC 實現(xiàn)代碼
Fine Uploader 的源代碼中用 VB.NET 實現(xiàn)了一個 Controller（UploadController.vb），我們在使用時改為了 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ù)器端實現(xià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é)果演示
您可能感興趣的文章:- ASP.NET MVC HttpPostedFileBase文件上傳的實例代碼
- ASP.NET MVC4 利用uploadify.js多文件上傳
- asp.net core mvc實現(xiàn)文件上傳實例
- asp.net mvc 實現(xiàn)文件上傳帶進度條的思路與方法
- 解決ASP.NET Core Mvc文件上傳限制問題實例
- ASP.NET MVC文件上傳教程(二）
- ASP.NET MVC 文件上傳教程(一）
- ASP.NET MVC5實現(xiàn)文件上傳與地址變化處理（5）
- ASP.NET MVC處理文件上傳的小例子
- ASP.NET MVC實現(xiàn)批量文件上傳
