[代碼示例]用Fine Uploader+ASP.NET MVC實現ajax文件上傳

本文轉載自查看原文 2012-11-27 12:34 11684 Web前端/ ASP.NET MVC

Fine Uploader（http://fineuploader.com/）是一個實現 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，下載地址：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. 瀏覽器中的顯示效果

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

圖片上傳結果演示

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 ASP.NET MVC文件上傳簡單示例 Fine Uploader + Spring3.2.2(Java+html5上傳) SpringMVC+jquery-fineuploader 文件上傳如何構建ASP.NET MVC4&JQuery&AJax&JSon示例 ASP.NET Core MVC上傳文件 asp.net mvc 上傳文件 ASP.NET MVC上傳文件 ASP.NET MVC HttpPostedFileBase文件上傳封裝Web Uploader 上傳插件、My97DatePicker、百度編輯器的使用 (ASP.NET MVC) spring mvc框架+ ajax實現文件上傳 asp.net mvc Ajax 上傳圖片加預覽