[程式碼範例]用Fine Uploader+ASP.NET MVC實現ajax檔案上傳上傳檔案就這麼簡單：Request.InputStream to FileStream

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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

相關博文：上傳檔案就這麼簡單：Request.InputStream to FileStream

圖片上傳結果示範

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More