[Fine Uploader] 用Fine Uploader+ASP.NET MVC实现ajax文件上传[代码示例]
2023-09-14 09:01:22 时间
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 不依赖于 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 });
}
图片上传结果演示
相关文章
- [.NET控件]Telerik RadControls for ASP.NET AJAX 2008 Q1 net 2.0 Web.UI「建议收藏」
- ASP.NET Core 6框架揭秘实例演示[29]:搭建文件服务器
- net use * /del_想打开文件但显示遇到问题需要关闭
- silverlight开发_net网站例子
- java 使用apache的net包ftp上传文件详解编程语言
- 使用Net实现Oracle数据库的快速导入(net导入oracle)
- NET与MySQL实现无缝连接(.net mysql连接)
- ASP.NET数据库编程之处理文件访问许可
- asp.net下大文件上传知识整理
- ASP.NET读取XML文件4种方法分析
- asp.net中上传图片文件实现防伪图片水印并写入数据库
- 点击图片,AJAX删除后台图片文件的实现代码(asp.net)
- .Net中导出数据到Excel(asp.net和winform程序中)
- asp.net文件上传实例汇总
- ASP.NET批量下载文件的方法
- ASP.NET中repeater控件用法实例
- Asp.net获取服务器指定文件夹目录文件并提供下载的方法