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 下载地址:

点击此处下载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();
} &nbsp; 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;
} } &nbsp;

下面是demo下载地址:

点击此处下载demo

asp.net mvc 使用uploadfiles 实现异步上传数据的更多相关文章

  1. 在ASP.NET MVC下实现单个图片上传, 客户端服务端双重限制图片大小和格式, 服务端裁剪图片

    在"MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01-单文件上传"一文中,使用JSAjaxFileUploader这款插件实现了单文 ...

  2. ASP.NET MVC实现Excel文件的上传下载

    在应用系统开发当中,文件的上传和下载是非常普遍的需求.在基于.NET的C/S架构的项目开发当中,有多种方案可以实现文件的上传和下载(httpwebrequest.webclient等),而且多采用异步 ...

  3. Asp.Net Mvc 使用WebUploader 多图片上传

    来博客园有一个月了,哈哈.在这里学到了很多东西.今天也来试着分享一下学到的东西.希望能和大家做朋友共同进步. 最近由于项目需要上传多张图片,对于我这只菜鸟来说,以前上传图片都是直接拖得控件啊,而且还是 ...

  4. ASP.NET MVC使用jQuery无刷新上传

    昨晚网友有下载了一个jQuery无刷新上传的小功能,他尝试搬至ASP.NET MVC应用程序中去,在上传死活无效果.Insus.NET使用Teamviewer远程桌面,操作一下,果真是有问题.网友是说 ...

  5. 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 ...

  6. C#工具:ASP.NET MVC单例模式(懒汉)实现文件上传

    1.SingletonConfigRead帮助类 using System; using System.Collections.Generic; using System.IO; using Syst ...

  7. ASP.NET MVC WebAPI实现文件批量上传

    工作中学习,学习中记录~~~~~~ 最下面附上demo 任务需求:需要做一个apI接口让C#的程序调用实现批量文件的上传. 难度: 没有做过通过API上传文件的...之前做过网站前后台上传. 首先当然 ...

  8. asp.net mvc+webuploader大文件分片上传

    首先是前端: var GUID = WebUploader.Base.guid();//一个GUID uploadereditsVideo = WebUploader.create({ // swf文 ...

  9. 【NopCommerce 3.1】asp.net mvc 利用jQuery from.js上传用户头像

    纯代码不解释. 在CusotmerControllers中添加上传方法 /// <summary> /// ajax上传用户头像 /// </summary> /// < ...

随机推荐

  1. Linux-用户和权限

    1 Linux所有内容都是文件 归一的思想 面向对象的思想 文件只需要做增删改查的操作 2 延迟读取 一般的文本读取工具都是先将内容全部都读入内存中 cat的机制不同 是读一行显示一行 这与它的功能有 ...

  2. C++模板之隐式实例化、显示实例化、隐式调用、显示调用和模板特化详解

    模板的实例化指函数模板(类模板)生成模板函数(模板类)的过程.对于函数模板而言,模板实例化之后,会生成一个真正的函数.而类模板经过实例化之后,只是完成了类的定义,模板类的成员函数需要到调用时才会被初始 ...

  3. python读文件和写文件

    f=open('D:\\wangdongjie\\files\\webservice\\baidu\\3.txt','r+') f.write('中国电视台1][][23qwe12f我是一个小小的石头 ...

  4. 如何使用最简单的方法将一个已经存在的工程中使用 cocaPodfile

    在网上搜索的使用 cocaPods 安装一些优秀的框架,搜索的博客大多步骤都是非常的麻烦,这里的方法非常的简单,本篇仅仅作为以后备用.   第一步:首先找到我们的工程,在终端中输入 cd 拖入已经存在 ...

  5. js 拦截 窗体关闭事件

    <script type="text/javascript">   <!--         window.onbeforeunload = onbeforeun ...

  6. FTP服务基础

    网络文件共享 本章内容 FTP服务 NFS服务 SAMBA服务 DAS.NAS.SAN(文件) DAS:开放系统的直连式存储(Direct-Attached Storage) 磁盘连接到本机的电脑上, ...

  7. cocos2dx-lua绑定之代码编辑器

    转自:http://blog.csdn.net/wtyqm/article/details/9346863 享受脚本语言灵活.更新方便.免于编译的好处,但也不能忍受离开那些方便的IDE特性(跳转.自动 ...

  8. sql添加表

    IF EXISTS(SELECT * FROM sysobjects WHERE name='learnRecord') DROP TABLE learnRecord GO CREATE TABLE ...

  9. E20181120-hm

    checkerboard n. 西洋跳棋盘; checker n. 方格图案;

  10. 简单安装与使用composer

    1.下载composer.exe工具,然后进行安装 这一步需要找到你使用的php版本文件 2.windows+r     cmd  输入composer 安装中国镜像,提高使用效率 https://p ...