asp.net mvc 使用uploadfiles 实现异步上传数据
lesg.cn
文章发布在: http://www.lesg.cn/netdaima/net/2017-990.html
在实际开发过程中, 为了提高用户的体验,在上传文件的时候通常会使用异步上传文件的方式来实现;
然而,自己实现的话界面css、js、后台代码等多个方面的工作量来看,并不是很划算; 毕竟异步上传的代码并不是核心代码;
开发产品建议遵循一个理念,除了核心代码, 核心业务之外; 其他的代码均建议采用可靠的第三方服务;
这里推荐一个不错的异步上传组件; “uploadfiles ”
uploadfiles 是基于jquery 开发的一个上传组件;它已经集成了 css js ; 使用非常方便;基本上就是复制黏贴;
lesg.cn 乐水果代码分享提供了这个组件的下载地址:
以下是下载地址: http://lesg.cn/down/uploadfiles.zip 点击此处下载
Demo 下载地址:
下面是使用代码:
第一步引入css 和JS文件
<link href="../../script/uploadfiles/css/zyUpload.css" rel="stylesheet" /> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="../../script/uploadfiles/js/zyUpload.js"></script>
<script src="../../script/uploadfiles/js/zyFile.js"></script>
第二步, 在body中创建一个 容器用于自动生成图片上传的界面
<form id="form1"> <div>
<div id="demo" class="demo"></div>
</div>
</form>
第三步,在script 创建生成项
$(function () {
// 初始化插件
$("#demo").zyUpload({
width: "600px", // 宽度
height: "400px", // 宽度
itemWidth: "140px", // 文件项的宽度
itemHeight: "115px", // 文件项的高度
url: "/Jewelry_UpLoad/UploadFile/@Html.Raw(ViewData["key"])", // 上传文件的路径
fileType: ["gif", "png", "jpg", "jpeg", "bmp"],// 上传文件的类型
fileSize: 51200000, // 上传文件的大小
multiple: true, // 是否可以多个文件上传
dragDrop: true, // 是否可以拖动上传文件
tailor: true, // 是否可以裁剪图片
del: true, // 是否可以删除文件
finishDel: false, // 是否在上传文件完成后删除预览
/* 外部获得的回调接口 */
onSelect: function (selectFiles, allFiles) { // 选择文件的回调方法 selectFile:当前选中的文件 allFiles:还没上传的全部文件
console.info("当前选择了以下文件:");
console.info(selectFiles);
},
onDelete: function (file, files) { // 删除一个文件的回调方法 file:当前删除的文件 files:删除之后的文件
console.info("当前删除了此文件:");
console.info(file.name);
$("input[id='" + file.name + "']").remove();
},
onSuccess: function (file, response) { // 文件上传成功的回调方法
console.info("此文件上传成功:");
console.info(file.name);
console.info("此文件上传到服务器地址:");
console.info(response);
$("#uploadInf").append("<p>上传成功,文件地址是:" + response + "</p>"); $(".dv_file_list").append('<input class="form-control" type="text" name="img_list" id="' + file.name + '" value="' + response + '" />');
},
onFailure: function (file, response) { // 文件上传失败的回调方法
console.info("此文件上传失败:");
console.info(file.name);
},
onComplete: function (response) { // 上传完成的回调方法
console.info("文件上传完成");
console.info(response);
}
});
});
第四步,在后台创建以下代码
public string UploadFile()
{
//上传配置
int size = ; //文件大小限制,单位MB //文件大小限制,单位MB
string[] filetype = { ".gif", ".png", ".jpg", ".jpeg", ".bmp" }; //文件允许格式
//上传图片
Hashtable info = new Hashtable();
FiUpload up = new FiUpload();
string path = "/Content/Images/jewelry"; info = up.upFile(this, path + '/', filetype, size); //获取上传状态
return info["url"].ToString();
} public class FiUpload
{
string state = "SUCCESS"; string URL = null;
string currentType = null;
string uploadpath = null;
string filename = null;
string originalName = null;
//HttpPostedFile uploadFile = null;
HttpPostedFileBase uploadFile = null;
/// <summary>
/// 上传文件的主处理方法
/// </summary>
/// <param name="cxt"></param>
/// <param name="pathbase"></param>
/// <param name="filetype"></param>
/// <param name="size"></param>
/// <returns></returns>
public Hashtable upFile(Controller cxt, string pathbase, string[] filetype, int size)
{
uploadpath = cxt.Server.MapPath(pathbase);//获取文件上传路径 try
{ uploadFile = cxt.Request.Files[];
originalName = uploadFile.FileName; //目录创建
createFolder(); //格式验证
if (checkType(filetype))
{
//不允许的文件类型
state = "\u4e0d\u5141\u8bb8\u7684\u6587\u4ef6\u7c7b\u578b";
}
//大小验证
if (checkSize(size))
{
//文件大小超出网站限制
state = "\u6587\u4ef6\u5927\u5c0f\u8d85\u51fa\u7f51\u7ad9\u9650\u5236";
}
//保存图片
if (state == "SUCCESS")
{
filename = NameFormater.Format(cxt.Request["fileNameFormat"], originalName);
var testname = filename;
var ai = ;
while (File.Exists(uploadpath + testname))
{
testname = Path.GetFileNameWithoutExtension(filename) + "_" + ai++ + Path.GetExtension(filename);
}
uploadFile.SaveAs(uploadpath + testname);
URL = pathbase + testname;
}
}
catch (Exception)
{
// 未知错误
state = "\u672a\u77e5\u9519\u8bef";
URL = "";
}
return getUploadInfo();
} /// <summary>
/// 按照日期自动创建存储文件夹
/// </summary>
private void createFolder()
{
if (!Directory.Exists(uploadpath))
{
Directory.CreateDirectory(uploadpath);
}
} /// <summary>
/// 文件类型检测
/// </summary>
/// <param name="filetype"></param>
/// <returns></returns>
private bool checkType(string[] filetype)
{
currentType = getFileExt();
return Array.IndexOf(filetype, currentType) == -;
} /// <summary>
/// 获取文件扩展名
/// </summary>
/// <returns></returns>
private string getFileExt()
{
string[] temp = uploadFile.FileName.Split('.');
return "." + temp[temp.Length - ].ToLower();
} /// <summary>
/// 文件大小检测
/// </summary>
/// <param name="size"></param>
/// <returns></returns>
private bool checkSize(int size)
{
return uploadFile.ContentLength >= (size * * );
} /// <summary>
/// 获取上传信息
/// </summary>
/// <returns></returns>
private Hashtable getUploadInfo()
{
Hashtable infoList = new Hashtable(); infoList.Add("state", state);
infoList.Add("url", URL); if (currentType != null)
infoList.Add("currentType", currentType);
if (originalName != null)
infoList.Add("originalName", originalName);
return infoList;
} /// <summary>
/// 重命名文件
/// </summary>
/// <returns></returns>
private string reName()
{
return System.Guid.NewGuid() + getFileExt();
} /// <summary>
/// 删除存储文件夹
/// </summary>
/// <param name="path"></param>
public void deleteFolder(string path)
{
if (Directory.Exists(path))
{
Directory.Delete(path, true);
}
}
}
public static class NameFormater
{
public static string Format(string format, string filename)
{
if (String.IsNullOrWhiteSpace(format))
{
format = "{filename}{rand:6}";
}
string ext = Path.GetExtension(filename);
filename = Path.GetFileNameWithoutExtension(filename);
format = format.Replace("{filename}", filename);
format = new Regex(@"\{rand(\:?)(\d+)\}", RegexOptions.Compiled).Replace(format, new MatchEvaluator(delegate (Match match)
{
var digit = ;
if (match.Groups.Count > )
{
digit = Convert.ToInt32(match.Groups[].Value);
}
var rand = new Random();
return rand.Next((int)Math.Pow(, digit), (int)Math.Pow(, digit + )).ToString();
}));
format = format.Replace("{time}", DateTime.Now.Ticks.ToString());
format = format.Replace("{yyyy}", DateTime.Now.Year.ToString());
format = format.Replace("{yy}", (DateTime.Now.Year % ).ToString("D2"));
format = format.Replace("{mm}", DateTime.Now.Month.ToString("D2"));
format = format.Replace("{dd}", DateTime.Now.Day.ToString("D2"));
format = format.Replace("{hh}", DateTime.Now.Hour.ToString("D2"));
format = format.Replace("{ii}", DateTime.Now.Minute.ToString("D2"));
format = format.Replace("{ss}", DateTime.Now.Second.ToString("D2"));
var invalidPattern = new Regex(@"[\\\/\:\*\?\042\<\>\|]");
format = invalidPattern.Replace(format, "");
return format + ext;
} }
下面是demo下载地址:
asp.net mvc 使用uploadfiles 实现异步上传数据的更多相关文章
- 在ASP.NET MVC下实现单个图片上传, 客户端服务端双重限制图片大小和格式, 服务端裁剪图片
在"MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01-单文件上传"一文中,使用JSAjaxFileUploader这款插件实现了单文 ...
- ASP.NET MVC实现Excel文件的上传下载
在应用系统开发当中,文件的上传和下载是非常普遍的需求.在基于.NET的C/S架构的项目开发当中,有多种方案可以实现文件的上传和下载(httpwebrequest.webclient等),而且多采用异步 ...
- Asp.Net Mvc 使用WebUploader 多图片上传
来博客园有一个月了,哈哈.在这里学到了很多东西.今天也来试着分享一下学到的东西.希望能和大家做朋友共同进步. 最近由于项目需要上传多张图片,对于我这只菜鸟来说,以前上传图片都是直接拖得控件啊,而且还是 ...
- ASP.NET MVC使用jQuery无刷新上传
昨晚网友有下载了一个jQuery无刷新上传的小功能,他尝试搬至ASP.NET MVC应用程序中去,在上传死活无效果.Insus.NET使用Teamviewer远程桌面,操作一下,果真是有问题.网友是说 ...
- ASP.NET MVC 5 with EF 6 上传文件
参考 ASP.NET MVC 5 with EF 6 - Working With Files Rename, Resize, Upload Image (ASP.NET MVC) ASP ...
- C#工具:ASP.NET MVC单例模式(懒汉)实现文件上传
1.SingletonConfigRead帮助类 using System; using System.Collections.Generic; using System.IO; using Syst ...
- ASP.NET MVC WebAPI实现文件批量上传
工作中学习,学习中记录~~~~~~ 最下面附上demo 任务需求:需要做一个apI接口让C#的程序调用实现批量文件的上传. 难度: 没有做过通过API上传文件的...之前做过网站前后台上传. 首先当然 ...
- asp.net mvc+webuploader大文件分片上传
首先是前端: var GUID = WebUploader.Base.guid();//一个GUID uploadereditsVideo = WebUploader.create({ // swf文 ...
- 【NopCommerce 3.1】asp.net mvc 利用jQuery from.js上传用户头像
纯代码不解释. 在CusotmerControllers中添加上传方法 /// <summary> /// ajax上传用户头像 /// </summary> /// < ...
随机推荐
- 51nod1060:最复杂的数(DFS求反素数)
把一个数的约数个数定义为该数的复杂程度,给出一个n,求1-n中复杂程度最高的那个数. 例如:12的约数为:1 2 3 4 6 12,共6个数,所以12的复杂程度是6.如果有多个数复杂度相等,输出最 ...
- HDU5919 Sequence2
传送门 这道题是主席树好题啊-- 题目大意:给定一个序列,每次给定一段区间,区间内所有不同的数第一次出现的位置排成一个序列,求这个序列的中位数. 其实求中位数并不是很难,只要我们能把这个序列中不同的数 ...
- Linux--top命令查看系统状态,所有值讲解
Linux系统可以通过top命令查看系统的CPU.内存.运行时间.交换分区.执行的线程等信息.通过top命令可以有效的发现系统的缺陷出在哪里.是内存不够.CPU处理能力不够.IO读写过高. 一.top ...
- bzoj2806
广义后缀自动机+二分+单调队列+dp 这道题其实就是一个简单dp,dp[i]表示匹配到i最长匹配多少,设val[i]表示当前位置和原串的最长公共长度,二分的长度是L,那么要求dp[i]=max(dp[ ...
- POI生成Excel工具类
import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import java.io.ByteArrayInp ...
- 3-3Java程序的结构
这是类的定义 这是主方法的定义 类里面包含一个主方法,或者是主方法嵌套到我们的类里面 大括号要特别注意,通过大括号我们可以看到类和主方法的包含关系 class后面一定是跟的类的名字
- Binder使用示例(转载)
转自:http://blog.csdn.net/new_abc/article/details/8097775
- ORM取数据很简单!是吗?
简介 几乎任何系统都以某种方式与外部数据存储一起运行.大多数情况下,外部数据存储是一个关系数据库,并且在实现时通常将数据提取任务委托给某些 ORM. 尽管 ORM 包含很多 routine 代码,但是 ...
- 洛谷 - P1381 - 单词背诵 - 哈希 - 尺取
https://www.luogu.org/problemnew/show/P1381 字符串匹配,用哈希总没有错的. 然后就是尺取了,题目要求首先尽可能多覆盖,那么每次尾巴往后面长. 一开始先找到第 ...
- VC++11 编译中的一些问题的解决办法
1. vc++ 的编译器的错误往往定位在错误的那一处,但是那一处可能在库的底层,而我们知道库,一般都不会错. 这时候应该好好看看我们自己的头文件是否正确,有可能头文件中的一些错误引发了连锁反应. 2 ...