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 
脚本之家Fine Uploader下载地址 http://www.jb51.net/codes/70040.html
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 }); 
} 

图片上传结果演示

[Fine Uploader] 用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+ASP.NET MVC实现ajax文件上传

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

  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. ASP.NET 异步Web API + jQuery Ajax 文件上传代码小析

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

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

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

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

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

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

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

随机推荐

  1. mvn 仓库地址修改

    默认仓库的存储位置 Maven缺省的本地仓库路径为${user.home}/.m2/repository具体如下图 自定义修改仓库的存储位置: 可改变默认的 .m2 目录下的默认本地存储库文件夹通过修 ...

  2. 如何修复U盘提示被写保护的问题

    最近一客户来店里说新买的U盘没用多久,在复制文件时提示:该磁盘已被写保护! 打不开U盘,并且也不能格式化,在DOS下重新给U盘分区也没用. 今天鼎盛电脑科技服务部的工程师就帮大家解决这个问题. 首先客 ...

  3. CSS3加载动画

    图1 通常我们都使用gif格式的图片或者使用Ajax来实现诸如这类的动态加载条,但是现在CSS3也可以完成,并且灵活性更大. 选1个例子看看怎么实现的吧: 效果图:   图2 代码: 使用1个名为'l ...

  4. JAVA 多线程机制（二）

    主要内容 1.理解线程的并发性 2.线程的同步 3.线程的常用方法   上一章中由于线程的并发性导致了多线程的执行总是会出现一些问题..线程的并发性是程序员不可控制 的,也是不可避免的,线程的并发性往 ...

  5. jQuery中 wrap() wrapAll() 与 wrapInner()的差异

    wrap() 方法把每个被选元素放置在指定的 HTML 内容或元素中.jQuery 文档操作 - wrapAll() 方法 wrapAll() 在指定的 HTML 内容或元素中放置所有被选的元素.jQ ...

  6. mysql数据库，如何在登录mysql之后执行操作系统上的SQL脚本？

    需求描述: 通过mysql客户端登录到mysql数据库,如何执行操作系统上的SQL脚本文件呢? 操作过程: 1.编写测试脚本文件 [mysql@redhat6 scripts]$ cat SeCoun ...

  7. work,i/o最小线程设置

    设置work i/o最小线程有两种方式1.通过配置文件设置,影响所有iis部署程序(待验证)2.通过程序代码设置,iis上部署的程序互不影响int minWorker, minIOC; //Get t ...

  8. Cocos2d-x3.0终于版Mac以及Win系统相关环境部署

    因个人原因此博客停止更新,其它更新博文将在该博客继续更新. http://blog.csdn.net/xiaohan_aimti/article/details/24653831 就在前几天,2014 ...

  9. Oracle Apex 有用笔记系列 2 - 文件上传管理

    1. 页面设计 页面A有若干region, 当中一个region用于文件列表管理(包含显示,下载.删除).如图A. 在页面A有一button,点击它会调用页面B,页面B负责文件上传.如图B. 图A 图 ...

  10. GIS-011-Cesium 使用 IIS设置

    .terrain Content-Type='application/octet-stream'