[Fine Uploader] 用Fine Uploader+ASP.NET MVC实现ajax文件上传[代码示例]
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代码:
<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.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);
}
}
}
}
}
服务器端实现改进版
{
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文件上传[代码示例]的更多相关文章
- 用Fine Uploader+ASP.NET MVC实现ajax文件上传[代码示例]
Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件的 Javascript 组件. This project attempts to achi ...
- [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传
原文 [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传 Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件 ...
- ASP.NET MVC下使用文件上传
这里我通过使用uploadify组件来实现异步无刷新多文件上传功能. 1.首先下载组件包uploadify,我这里使用的版本是3.1 2.下载后解压,将组件包拷贝到MVC项目中 3. 根目录下添加新 ...
- asp.net.mvc 的单文件上传和多文件上传的简单例子
首先打开vs2012,创建空的mvc4项目,名称为MVCStudy,选择基本模板
- ASP.NET MVC下使用文件上传和IIS7下的默认设置限制了上传大小的方法
不多说了,直接用别人的 http://www.cnblogs.com/jiekzou/p/4491505.html
- ASP.NET 异步Web API + jQuery Ajax 文件上传代码小析
该示例中实际上应用了 jquery ajax(web client) + async web api 双异步. jquery ajax post $.ajax({ type: "POST&q ...
- MVC中的文件上传-小结
web开发中,文件的上传是非常基本功能之一. 在asp.net中,通常做法是利用webservice 来接收文件请求,这样做的好处就是全站有了一个统一的文件上传接口,并且根据网站的实际情况,可以将we ...
- Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现)(转)
Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现) 相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦 ...
- 关于我使用spring mvc框架做文件上传时遇到的问题
非常感谢作者 原文:https://blog.csdn.net/lingirl/article/details/1714806 昨天尝试着用spring mvc框架做文件上传,犯了挺多不该犯的毛病问题 ...
随机推荐
- golang 垃圾回收 gc
http://ruizeng.net/golang-gc-internals/ 摘要 在实际使用go语言的过程中,碰到了一些看似奇怪的内存占用现象,于是决定对go语言的垃圾回收模型进行一些研究.本文对 ...
- C#基础教程/适合初学者
C#基础教程 第一章 C#语言基础 本章介绍C#语言的基础知识,希望具有C语言的读者能够基本掌握C#语言,并以此为基础,能够进一步学习用C#语言编写window应用程序和Web应用程序.当 ...
- hbase权威指南阅读随手笔记二之过滤器
转自:http://blog.csdn.net/saint1126/article/details/8257941 base过滤器的比较操作符: LESS <LESS_OR_EQUAL & ...
- php 添加数据库的几种方法
最简单的 <?php $con = mysql_connect("localhost","root","root"); if (!$c ...
- jenkins配置过程遇到的问题
jenkins 搭建完成后,可以浏览器访问: http://localhost:8081/jenkins, 新建任务过程中遇到以下问题: 1. 源码管理不现实git, 只显示无 解决: 插件管理 - ...
- Android代码的几点小技巧
1)View的状态保存与恢复dispatchRestoreInstanceStateonRestoreInstanceStateonSaveInstanceState 2)Service的前台服务使 ...
- Spring Boot 官方文档学习(一)入门及使用
个人说明:本文内容都是从为知笔记上复制过来的,样式难免走样,以后再修改吧.另外,本文可以看作官方文档的选择性的翻译(大部分),以及个人使用经验及问题. 其他说明:如果对Spring Boot没有概念, ...
- Spring的p标签
看Spring in action的时候看过p标签,可惜这东西不用就忘. p标签是为了简化setter的注入而引入的. 用法: p:属性 = "{值}" p:属性-ref = &q ...
- static、extern分析
1.extern extern在变量声明中有这样一个作用:你要在demo2.cpp中引用demo1.cpp中的一个全局变量,就要在demo2.h中用extern来声明这个全局变量(或者在demo1.h ...
- (转)Tiny210v2( S5PV210 ) 平台下 FIMD 对应 的 framebuffer 驱动中,关于 video buffer 的理解
原文:http://www.arm9home.net/read.php?tid-25938.html 管理提醒: 本帖被 xoom 执行加亮操作(2012-12-13) 如之前所说,一直想知道显示数据 ...