原文 [代码示例]用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 =  * ;

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

            {

                if (br.Read(buffer, , ChunkSize) > )

                {

                    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文件上传的更多相关文章

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

    Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件的 Javascript 组件. This project attempts to achi ...

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

    Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件的 Javascript 组件   This project attempts to ach ...

  3. ASP.NET MVC下使用文件上传

    这里我通过使用uploadify组件来实现异步无刷新多文件上传功能. 1.首先下载组件包uploadify,我这里使用的版本是3.1 2.下载后解压,将组件包拷贝到MVC项目中 3.  根目录下添加新 ...

  4. asp.net.mvc 的单文件上传和多文件上传的简单例子

    首先打开vs2012,创建空的mvc4项目,名称为MVCStudy,选择基本模板

  5. ASP.NET MVC下使用文件上传和IIS7下的默认设置限制了上传大小的方法

    不多说了,直接用别人的 http://www.cnblogs.com/jiekzou/p/4491505.html

  6. MVC中的文件上传-小结

    web开发中,文件的上传是非常基本功能之一. 在asp.net中,通常做法是利用webservice 来接收文件请求,这样做的好处就是全站有了一个统一的文件上传接口,并且根据网站的实际情况,可以将we ...

  7. Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现)(转)

    Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现) 相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦 ...

  8. 关于我使用spring mvc框架做文件上传时遇到的问题

    非常感谢作者 原文:https://blog.csdn.net/lingirl/article/details/1714806 昨天尝试着用spring mvc框架做文件上传,犯了挺多不该犯的毛病问题 ...

  9. ASP.NET Core 中的文件上传

    ASP.NET Core上传文件 ASP.NET Core使用IFormFile来读取上传的文件内容,然后将数据写入到磁盘或其它存储空间. 添加FileUpload模型,用来接收上传的文件内容. pu ...

随机推荐

  1. ASP.NET PipeLine #Reprinted#

    从ASP.NET 1.0 起,相比于ASP中的COM, PipeLine 就是一项重大的改进. ASP.NET 时代的管道模型究竟是怎么样的? 我们能接触到的四个最重要的概念就是HttpApplica ...

  2. CMD获取当前目录的绝对路径

    @echo offecho 当前盘符:%~d0echo 当前盘符和路径:%~dp0echo 当前批处理全路径:%~f0echo 当前盘符和路径的短文件名格式:%~sdp0echo 当前CMD默认目录: ...

  3. 腾讯QQ是用什么语言开发的(转)

    腾讯QQ的部分COM组件用的VC6,用exescope看其中几个dll的依赖,依赖于MFC42.dll,MSVCRT.dll,MSVCP60.dll都说明是VC6写的. 还有一部分用的VS2005,包 ...

  4. Memcached初体验及原理解说

    1.简单介绍 Memcached 是一个 高性能的 分布式 内存对象缓存系统,用于动态Web应用降低数据库负载,提升性能. 2.试用场景 1.变化频繁,具有不稳定性的数据 (比方用户在线状态.在线人数 ...

  5. Axure滚动效果实现

    下面的这个透明区域用于显示滚动效果,它本身是一个处于隐藏状态的动态面板,它里面也放了一个动态面板用于产生移动的效果 里面的动态面板起名“实际内容”,注意它的默认状态是“状态2”,状态2和状态一的内容一 ...

  6. ArcGIS Engine 改变线IPolyline的方向

    有时候需要改变一下线的方向来组成要要的图形,可以按一下方法来变换一下. 如果看官有好的方法的话,请不吝贴上为谢! private IPolyline ChangeDirection(IPolyline ...

  7. BZOJ 1977: [BeiJing2010组队]次小生成树 Tree( MST + 树链剖分 + RMQ )

    做一次MST, 枚举不在最小生成树上的每一条边(u,v), 然后加上这条边, 删掉(u,v)上的最大边(或严格次大边), 更新答案. 树链剖分然后ST维护最大值和严格次大值..倍增也是可以的... - ...

  8. java 如何自定义异常 用代码展示 真心靠谱

    先建两个自定义的异常类 ChushufuException类 class ChushufuException extends Exception { public ChushufuException( ...

  9. 面向对象程序设计-C++ Class & Object & Friend Function & Constructor & Destructor【第五次上课笔记】

    大家可以下载后用Vim 或者 Sublime Text等文本编辑器查看 以下代码均已折叠,点击“+“即可打开 一开始老师用C语言大作业的例子,写了个 Student 的结构以及相关操作 #includ ...

  10. sqlite可视化工具以及django-South

    在linux系统下想要可视化sqlite的办法 一:安装sqlitebrowser: sudo apt-get install sqlitebrowser 二:在终端提示符后输入sqlitebrows ...