[代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传

原文 [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传

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

图片上传结果演示

[代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传

 

你可能感兴趣的:(asp.net)