用Fine Uploader+ASP.NET MVC实现ajax文件上传[代码示例]
更新时间：2021年9月22日 10:17 点击：1628
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下载地址 https://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下载地址 https://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 });
}
图片上传结果演示
相关文章
- 本文章来人大家介绍一个php文件上传类的使用方法，期望此实例对各位php入门者会有不小帮助哦。 简介 Class.upload.php是用于管理上传文件的php文件上传类， 它可以帮...2016-11-25
- 又码了一个周末的代码，这次在做一些关于文件上传的东西。（PHP UPLOAD）小有收获项目是一个BT种子列表，用户有权限上传自己的种子，然后配合BT TRACK服务器把种子的信息写出来...2016-11-25
- 本文实例讲述了jQuery实现文件上传进度条效果的代码。分享给大家供大家参考。具体如下： 运行效果截图如下：具体代码如下：<!DOCTYPE html><html><head><meta charset="utf-8"><title>upload</title><link rel="stylesheet...2015-11-24
- 本篇文章主要说明的是与php文件上传的相关配置的知识点。PHP文件上传功能配置主要涉及php.ini配置文件中的upload_tmp_dir、upload_max_filesize、post_max_size等选项，下面一一说明。打开php.ini配置文件找到File Upl...2015-10-21
借助FileReader实现将文件编码为Base64后通过AJAX上传
这篇文章主要介绍了借助FileReader实现将文件编码为Base64后通过AJAX上传的方法,包括后端对文件数据解码并保存的PHP代码,需要的朋友可以参考下...2015-12-25- 这篇文章主要介绍了jQuery+ajax简单实现文件上传的方法,结合实例形式简单分析了jQuery基于ajax的post方法进行文件传输及asp.net后台处理技巧,需要的朋友可以参考下...2016-06-12
- 本文实例讲述了PHP多文件上传类，分享给大家供大家参考。具体如下：<?phpclass Test_Upload{ protected $_uploaded = array(); protected $_destination; protected $_max = 1024000; protected $_messages =...2015-10-30
- 这篇文章主要为大家详细介绍了js实现上传文件添加和删除文件选择框 ,具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2016-10-25
- php 大文件带进度的上传，一直是一个令php程序员很苦恼的问题。查询baidu 、Google ，大体做带进度的上传方式为：flash+php，socket，apc+php等，下面我介绍了apc +php+ajax制作的带进度的上传，并贴出源码，希望对大家有用。 Altern...2015-10-30
- 这篇文章主要为大家详细介绍了C#文件上传的简单实现，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-06-25
- 这篇文章主要介绍了js 实现文件上传样式，下面文章举例说明js 是如何实现文件上传样式的，附有代码详细解说,需要的朋友可以参考一下，希望对你有所帮助...2021-10-21
- 这篇文章主要为大家详细介绍了uploader秒传图片到服务器的完整代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-04-27
- 本文给大家介绍一个不错的需要登录的php 文件上传管理系统，功能简单有需要了解的同学可参考。 代码如下<?php$admin_pw="admin";//管理密码$uploaddir="upload";//上传目录session_start();if($_GET['action']=="g...2015-10-30
asp.net html控件的File控件实现多文件上传实例分享
asp.net中html控件的File控件实现多文件上传简单实例，开发工具vs2010使用c#语言,感兴趣的朋友可以了解下，必定是多文件上传值得学习，或许本文所提供的知识点对你有所帮助...2021-09-22- 这篇文章主要介绍了JQuery异步提交表单与文件上传功能,结合实例形式分析了jQuery表单提交及文件传输操作的相关实现技巧,需要的朋友可以参考下...2017-01-16
- 复制代码 代码如下:<?php if($_FILES['myfile']['name'] != '') { if($_FILES['myfile']['error'] > 0) { echo "错误状态：" . $_FILES['myfile']['error']; } else { move_uploaded_f...2013-10-04
使用jQuery.form.js/springmvc框架实现文件上传功能
这篇文章主要介绍了使用jQuery.form.jsspringmvc框架实现文件上传功能，非常具有参考借鉴价值，感兴趣的朋友一起学习吧...2016-05-14jquery插件uploadify实现带进度条的文件批量上传
这篇文章主要介绍了jquery插件uploadify实现带进度条的文件批量上传，感兴趣的小伙伴们可以参考一下...2015-12-14- 这篇文章主要介绍了C#简单实现文件上传功能，利用MVC+EF+LigerUI 实现的upload上传功能，感兴趣的小伙伴们可以参考一下...2020-06-25
- CKEditor是新一代的FCKeditor，是一个重新开发的版本。CKEditor是全球最优秀的网页在线文字编辑器之一，因其惊人的性能与可扩展性而广泛的被运用于各大网站。而CKFinder是...2016-09-20