用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
图片上传结果演示
上传文件就这么简单: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文件上传[代码示例]的更多相关文章
- [Fine Uploader] 用Fine Uploader+ASP.NET MVC实现ajax文件上传[代码示例]
Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件的 Javascript 组件 This project attempts to ach ...
- [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传
原文 [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传 Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件 ...
- iframe实现Ajax文件上传效果示例
<!doctype html> <html> <head> <meta charset=utf-8> <head> <title> ...
- ASP.NET MVC下使用文件上传
这里我通过使用uploadify组件来实现异步无刷新多文件上传功能. 1.首先下载组件包uploadify,我这里使用的版本是3.1 2.下载后解压,将组件包拷贝到MVC项目中 3. 根目录下添加新 ...
- asp.net.mvc 的单文件上传和多文件上传的简单例子
首先打开vs2012,创建空的mvc4项目,名称为MVCStudy,选择基本模板
- ASP.NET 异步Web API + jQuery Ajax 文件上传代码小析
该示例中实际上应用了 jquery ajax(web client) + async web api 双异步. jquery ajax post $.ajax({ type: "POST&q ...
- ASP.NET MVC下使用文件上传和IIS7下的默认设置限制了上传大小的方法
不多说了,直接用别人的 http://www.cnblogs.com/jiekzou/p/4491505.html
- MVC中的文件上传-小结
web开发中,文件的上传是非常基本功能之一. 在asp.net中,通常做法是利用webservice 来接收文件请求,这样做的好处就是全站有了一个统一的文件上传接口,并且根据网站的实际情况,可以将we ...
- Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现)(转)
Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现) 相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦 ...
随机推荐
- arch linux设备(请参考官方文档,桌面安装没有找到一个好工作后)
首先,启动安装系统(一获得通过vmware虚拟机) 1.设置键盘布局 #loadkeys "us" #设置为美国的键盘布局.一般能够默认就可以 2.建立硬盘的分区 我採用的是fdi ...
- oracle 12c 三学习 pdb 可插拔测试
DECLARE l_result BOOLEAN; BEGIN l_result := DBMS_PDB.check_plug_compatibility( pdb_descr_file => ...
- new TimerTask(robot)(转)
import java.awt.Dimension; import java.awt.Robot; import java.awt.Toolkit; import java.io.PrintStrea ...
- c#中 uint--byte[]--char[]--string相互转换汇总
原文:c#中 uint--byte[]--char[]--string相互转换汇总 在在做一些互操作的时候往往需要一些类型的相互转换,比如用c#访问win32api的时候往往需要向api中传入DWOR ...
- 推断序列的端部的大小C规划
概念 big-endian格式:高字节字符数据被存储在低地址.字数据的低字节存放在高地址. 小尾数格式:相较于大端存储格式,在小尾数格式.低地址存储在字数据的低字节.的是字数据的高字节. 如5A6C中 ...
- 给Activity设置Dialog属性,点击区域外消失;
1.在AndroidManifest.xml中给Activity设置样式: <activity android:name=".MyActivity" ...
- “MEAN”技术栈开发web应用
“MEAN”技术栈开发web应用 上一篇我们讲了如何使用angular搭建起项目的前端框架,前端抽象出一个service层来向后端发送请求,后端则返回相应的json数据.本篇我们来介绍一下,如何在no ...
- Android图表日历控件组件
1.图表引擎 - AChartEngine AChartEngine是一款基于Android的图表绘制引擎,它为Android开发人员提供了非常多有用的图表绘制工具类,假设你须要在Android应用中 ...
- AndroidUI的组成部分RoomButton
<!-- 知识点汇总: 1.Button与ImageButton的差别在于,Button生成的button上显示文字 而ImageButton上则显示图片.须要指出的是:为ImageButton ...
- ASP.NET MVC4实现URL伪静态
1.在Web.config添加节点配置: <system.webServer> <modules runAllManagedModulesForAllRequests="t ...