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

图片上传结果演示

上传文件就这么简单：Request.InputStream to FileStream

借助 .NET 4.0 新增的 Stream.CopyTo ()，可以轻松实现“流对流”保存上传文件，示例代码如下：

public ActionResult ProcessUpload(string filename)

{

    using (var inputStream = Request.InputStream)

    {

        using (var flieStream = new FileStream(@"c:\temp\" + filename, FileMode.Create))

        {

            inputStream.CopyTo(flieStream);

        }

    }

    return Json(new { success = true });

}

用Fine Uploader+ASP.NET MVC实现ajax文件上传[代码示例]的更多相关文章

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

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

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

    原文 [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传 Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件 ...

  3. iframe实现Ajax文件上传效果示例

    <!doctype html> <html> <head> <meta charset=utf-8> <head> <title> ...

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

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

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

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

  6. ASP.NET 异步Web API + jQuery Ajax 文件上传代码小析

    该示例中实际上应用了 jquery ajax(web client) + async web api 双异步. jquery ajax post $.ajax({ type: "POST&q ...

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

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

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

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

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

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

随机推荐

  1. Android异步任务

    本文主要探讨Android平台提供的各种异步载入机制,包括它们的适用场景.用法等. 1. AsynTask AsynTask适用于最长能够持续几秒钟的短时间的操作,对于长时间的操作,建议使用java. ...

  2. linux下改动内核參数进行Tcp性能调优 -- 高并发

    前言: Tcp/ip协议对网络编程的重要性,进行过网络开发的人员都知道,我们所编写的网络程序除了硬件,结构等限制,通过改动Tcp/ip内核參数也能得到非常大的性能提升, 以下就列举一些Tcp/ip内核 ...

  3. textarea文本字段的宽度和高度（width、height）自己主动适应不断变化的处理

    来源:http://www.cnblogs.com/jice/archive/2011/08/07/2130069.html <HTML> <HEAD> <TITLE&g ...

  4. 产品CEO?别傻了，你不是拿破仑

    编者按:本文出自技术产品经理Daniel Elizalde的博客,中文版由天地会珠海分舵进行编译. 全文针对如今流行的把产品经理比喻成"产品CEO"的这一说法进行深入的分析.跟大家 ...

  5. pdf转换为word小工具，挺好

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGFwZW5nMDExMg==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  6. 使用GDB在远程开发机上调试

    由于一些环境限制,很多学生很可能需要在开发机器上调试.但是,由于对计算机资源的开发限制.在本地的直接机的发展GDB环境配置问题已经成为,其实,我们可以利用这段时间GDB自带gdbserver工具将能够 ...

  7. linux 下一个 osw先从操作系统和标准脚本主动发起

    linux 下一个 osw与操作系统的引导和启动标准的脚本.osw它指的是--os watcher,这是一个显示器os这些指标shell脚本.osw监测数据一般使用oracle技能评估os资源的使用, ...

  8. Linux tcpdump命令具体解释

    简单介绍 用简单的话来定义tcpdump,就是:dump the traffic on a network,依据使用者的定义对网络上的数据包进行截获的包分析工具. tcpdump能够将网络中传送的数据 ...

  9. std::list.pop_back() 弹空了列表导致的崩溃

    core文件输出: (gdb) bt # # ) at xxxxx/sql/signal_handler.cc: # <signal handler called> # # # # # 0 ...

  10. .NET应用架构设计—再次了解分层架构（现代企业应用分层架构核心设计元素）

    阅读文件夹: 1.背景介绍 2.简要回想下传统三层架构 3.企业级应用分层架构(现代分层架构的基本演变过程) 3.1.服务层中应用契约式设计来解决动态条件不匹配错误(通过契约式设计模式来将问题在线下暴 ...