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> /// < ...
随机推荐
- Linux-用户和权限
1 Linux所有内容都是文件 归一的思想 面向对象的思想 文件只需要做增删改查的操作 2 延迟读取 一般的文本读取工具都是先将内容全部都读入内存中 cat的机制不同 是读一行显示一行 这与它的功能有 ...
- C++模板之隐式实例化、显示实例化、隐式调用、显示调用和模板特化详解
模板的实例化指函数模板(类模板)生成模板函数(模板类)的过程.对于函数模板而言,模板实例化之后,会生成一个真正的函数.而类模板经过实例化之后,只是完成了类的定义,模板类的成员函数需要到调用时才会被初始 ...
- python读文件和写文件
f=open('D:\\wangdongjie\\files\\webservice\\baidu\\3.txt','r+') f.write('中国电视台1][][23qwe12f我是一个小小的石头 ...
- 如何使用最简单的方法将一个已经存在的工程中使用 cocaPodfile
在网上搜索的使用 cocaPods 安装一些优秀的框架,搜索的博客大多步骤都是非常的麻烦,这里的方法非常的简单,本篇仅仅作为以后备用. 第一步:首先找到我们的工程,在终端中输入 cd 拖入已经存在 ...
- js 拦截 窗体关闭事件
<script type="text/javascript"> <!-- window.onbeforeunload = onbeforeun ...
- FTP服务基础
网络文件共享 本章内容 FTP服务 NFS服务 SAMBA服务 DAS.NAS.SAN(文件) DAS:开放系统的直连式存储(Direct-Attached Storage) 磁盘连接到本机的电脑上, ...
- cocos2dx-lua绑定之代码编辑器
转自:http://blog.csdn.net/wtyqm/article/details/9346863 享受脚本语言灵活.更新方便.免于编译的好处,但也不能忍受离开那些方便的IDE特性(跳转.自动 ...
- sql添加表
IF EXISTS(SELECT * FROM sysobjects WHERE name='learnRecord') DROP TABLE learnRecord GO CREATE TABLE ...
- E20181120-hm
checkerboard n. 西洋跳棋盘; checker n. 方格图案;
- 简单安装与使用composer
1.下载composer.exe工具,然后进行安装 这一步需要找到你使用的php版本文件 2.windows+r cmd 输入composer 安装中国镜像,提高使用效率 https://p ...