jQuery.uploadify文件上传组件实例讲解


Posted in Javascript onSeptember 23, 2016

1、jquery.uploadify简介

在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好,无刷新,带上传进度等等。在最近的短信平台开发中,使用Uploadify进行文件上传。

Uploadify官网地址是:http://www.uploadify.com/ 可满足项目开发需求。

jQuery.uploadify文件上传组件实例讲解

下载地址:http://www.uploadify.com/wp-content/uploads/files/uploadify.zip 版本信息如下:

jQuery.uploadify文件上传组件实例讲解

解压之后,目录结构如下(不在详细解释):

jQuery.uploadify文件上传组件实例讲解

2、使用流程

下载的程序是PHP示例,由于项目使用的是asp.net mvc,使用uploadify可分以下步骤:

•(1)加入uploadify js类库(把uploadify相关js类库引用到项目的相关位置,比如放到scripts目录)

•(2)对uploadify二次进行封装,满足项目调用

•(3)编写文件上传处理方法

•(4)页面引用相关类库并编写上传脚本

2.1 对uploadify二次进行封装

针对uploadify调用进行js类库封装,满足项目使用:

//转换成key=value&key=value格式
tx.toParam = function (dto) {
return jQuery.param(dto);
} 
//设置上传文件
tx.uploadify = function (divId, options, action) {
if (options == undefined && action == undefined) {
$('#' + divId).uploadify("upload");
return;
}
if (options == undefined) {
abp.message.warn("请输入参数配置");
return;
}
var fileexts = options.fileexts;
if (fileexts == undefined || fileexts.length <= 0) {
abp.message.warn("要选择文件的扩展名不能为空");
return;
}
$('#' + divId).uploadify({
uploader: '/files/upload?r=' + Math.random()
+ "&fileexts=" + encodeURIComponent(fileexts)
+ "&" + (options !== undefined ? tx.toParam(options.params) : ""), // 服务器端处理地址
swf: '/Scripts/uploadify/uploadify.swf', // 上传使用的 Flash
width: 60, // 按钮的宽度
height: 23, // 按钮的高度
buttonText: "选择文件", // 按钮上的文字
buttonCursor: 'hand', // 按钮的鼠标图标
fileObjName: 'Filedata', // 上传参数名称
fileTypeExts: fileexts, // 扩展名
fileTypeDesc: "请选择文件", // 文件说明
fileDesc: '不超过200M的',
sizeLimit: 204800000, //允许上传的文件大小(kb) 此为2M
auto: false, // 选择之后,自动开始上传
multi: true, // 是否支持同时上传多个文件
queueSizeLimit: 1, // 允许多文件上传的时候,同时上传文件的个数
onSelectOnce: function (event, data) { //在单文件或多文件上传时,选择文件时触发
//event 事件对象(the event object)
//data 选择的操作信息
//data.filesSelected 选择文件操作中选中的文件数量
},
onUploadStart: function (file) {
//file:将要上载的文件对象
ShowBusy();
},
onUploadComplete: function (file) {
//file:上传或返回一个错误的文件对象。
},
onUploadSuccess: function (file, data, response) {
//file:成功上传的文件对象
//data:服务器端脚本返回的数据(任何由文件响应的任何东西)
//response:服务器返回的响应是否真的成功或错误,如果没有响应。如果返回false,这successtimeout期权到期后的反应真是假设。
if (action !== undefined) {
action(JSON.parse(data));
}
ClearBusy();
},
onUploadError: function (file, errorCode, errorMsg, errorString) {
//file:上传的文件对象
//errorCode:返回的错误代码
//errorMsg:返回的错误消息
//errorString:包含错误的所有细节的可读的错误信息
if (action !== undefined) {
if (action !== undefined) {
action({
result: errorCode,
message: errorMsg,
filename: "",
fileext: ""
});
}
}
ClearBusy();
}
});
}

2.2 文件上传处理

使用MVC特性,要登录之后才能进行文件上传:

using System;
using System.IO;
using System.Security.Principal;
using System.Web;
using System.Web.Mvc;
using System.Web.Security;
namespace TxSms.Web.Controllers
{
/// <summary>
/// 文件上传管理
/// </summary>
[Authorize]
public class FilesController : TxSmsControllerBase
{
private static string jsonResult = "{0}\"result\":{1},\"message\":\"{2}\",\"filename\":\"{3}\",\"fileext\":\"{4}\"{5}";
/// <summary>
/// 文件上传页面
/// </summary>
/// <returns></returns>
[Authorize]
public ActionResult Index()
{
return View();
}
/// <summary>
/// 上传文件
/// </summary>
/// <param name="filedata"></param>
/// <returns></returns>
[Authorize]
public ActionResult Upload(HttpPostedFileBase filedata)
{
// 如果没有上传文件
if (filedata == null || filedata.FileName.IsNullOrEmpty() || filedata.ContentLength == 0)
{
return new JsonStringResult(string.Format(jsonResult, "{", -1, "", "", "", "}"));
}
string parmPath = Request.QueryString["path"];
string parmGetzipfile = Request.QueryString["getzipfile"];
if (parmGetzipfile.IsNullOrEmpty())
{
parmGetzipfile = "0";
}
// 保存到 ~/uploads 文件夹中,名称不变
string time = DateTime.Now.ToString("yyyyMMddHHmmssfff");
string fileext = Path.GetExtension(filedata.FileName);
string filename = time + fileext;
string virtualPath = parmPath.IsNullOrEmpty()
? $"~/uploads/"
: $"~/uploads/{parmPath}/";
string actualPath = Server.MapPath(virtualPath);
if (!Directory.Exists(actualPath))
{
Directory.CreateDirectory(Server.MapPath(virtualPath));
}
// 文件系统不能使用虚拟路径
var destFile = virtualPath + filename;
string path = Server.MapPath(destFile);
filedata.SaveAs(path);
bool iszip = fileext != null && (fileext.Equals(".zip", StringComparison.OrdinalIgnoreCase) && parmGetzipfile.Equals("1"));
if (iszip)
{
var virtualPathZip = virtualPath + time + "/";
string actualPathZip = Server.MapPath(virtualPathZip);
if (!Directory.Exists(actualPathZip))
{
Directory.CreateDirectory(actualPathZip);
}
destFile = fileext = "";
//第一步骤,解压
TxSmsZipHelper.UnZipFile(path, actualPathZip);
//第二步骤,获取excel文件,如果没有获取到,则抛出异常
//获得目录信息
var dir = new DirectoryInfo(actualPathZip);
//获得目录文件列表
var files = dir.GetFiles();
foreach (FileInfo fileName in files)
{
//var ext = Path.GetExtension(fileName.Name).ToLower();
//if (ext == ".xls" || ext == ".xlsx")
//{
// destFile = Path.Combine(fileName.DirectoryName, fileName.Name);
// break;
//}
destFile = virtualPathZip + fileName.Name;
fileext = Path.GetExtension(fileName.Name);
break;
}
}
return new JsonStringResult(string.Format(jsonResult, "{", 0, "上传成功", destFile, fileext.ToLower(), "}"));
}
public class JsonStringResult : ContentResult
{
public JsonStringResult(string json)
{
Content = json;
ContentType = "application/json";
}
}
}
}

文件上传路径:/files/upload

2.3 页面调用

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="/Content/themes/base/uploadify/uploadify.css" rel="stylesheet"/>
<script src="/Scripts/jquery-2.1.4.min.js"></script>
<script src="/Scripts/uploadify/jquery.uploadify.min.js"></script>
<script type="text/javascript">
$(function () {
var ASPSESSID = '3iupfg2udk4m5hyzfj5ydlso';
var auth = '';
//初始化
tx.uploadify('uploadify'
,
{ //参数配置
fileexts: "*.jpg;*.png;*.zip", //要选择文件的扩展名,多个用;分割
//formData: { ASPSESSID: ASPSESSID, AUTHID: auth },
params: { //参数
path: 'files',//上传路径,允许为空
getzipfile: 1 //解压zip文件,并获取文件 0:不解压获取,1:解压获取
}
}
, function (data) { //回调函数
//data.result:0 表示成功,其他表示错误
//data.message:信息
//data.filename:文件名称
//data.fileext:文件扩展
console.log(data.result);
console.log(data.message);
console.log(data.filename);
console.log(data.fileext);
});
$("#btnUpload").click(function () {
tx.uploadify('uploadify'); //开始上传
});
});
</script>
</head>
<body>
<div style="margin: 40px;">
<div id="uploadify"></div>
<button id="btnUpload">开始上传</button>
</div>
</body>
</html>

允许程序,界面如下:

jQuery.uploadify文件上传组件实例讲解

选择文件—>开始上传:

jQuery.uploadify文件上传组件实例讲解

jQuery.uploadify文件上传组件实例讲解

ok,到此已经完成。

3、http 302解决方案

很怀疑二八原则,很快就出现了。同事用firefox进行测试,遇到如下提示:

jQuery.uploadify文件上传组件实例讲解

查找大量资料,发下是Upload方法认证的问题,去掉[Authorize]属性标签即可,代码修改如下:

using System;
using System.IO;
using System.Web;
using System.Web.Mvc;
namespace TxSms.Web.Controllers
{
/// <summary>
/// 文件上传管理
/// </summary>
//[Authorize]
public class FilesController : TxSmsControllerBase
{
private static string jsonResult = "{0}\"result\":{1},\"message\":\"{2}\",\"filename\":\"{3}\",\"fileext\":\"{4}\"{5}";
/// <summary>
/// 文件上传页面
/// </summary>
/// <returns></returns>
[Authorize]
public ActionResult Index()
{
return View();
}
/// <summary>
/// 上传文件
/// </summary>
/// <param name="filedata"></param>
/// <returns></returns>
//[Authorize]
public ActionResult Upload(HttpPostedFileBase filedata)
{
//加入认证信息
if (this.LoginUser == null)
{
return new JsonStringResult(string.Format(jsonResult, "{", -1, "抱歉,未登录,不允许上传", "", "", "}"));
}
// 如果没有上传文件
if (filedata == null || filedata.FileName.IsNullOrEmpty() || filedata.ContentLength == 0)
{
return new JsonStringResult(string.Format(jsonResult, "{", -2, "无上传文件", "", "", "}"));
}
string parmPath = Request.QueryString["path"];
string parmGetzipfile = Request.QueryString["getzipfile"];
if (parmGetzipfile.IsNullOrEmpty())
{
parmGetzipfile = "0";
}
// 保存到 ~/uploads 文件夹中,名称不变
string time = DateTime.Now.ToString("yyyyMMddHHmmssfff");
string fileext = Path.GetExtension(filedata.FileName);
string filename = time + fileext;
string virtualPath = parmPath.IsNullOrEmpty()
? $"~/uploads/"
: $"~/uploads/{parmPath}/";
string actualPath = Server.MapPath(virtualPath);
if (!Directory.Exists(actualPath))
{
Directory.CreateDirectory(Server.MapPath(virtualPath));
}
// 文件系统不能使用虚拟路径
var destFile = virtualPath + filename;
string path = Server.MapPath(destFile);
filedata.SaveAs(path);
bool iszip = fileext != null && (fileext.Equals(".zip", StringComparison.OrdinalIgnoreCase) && parmGetzipfile.Equals("1"));
if (iszip)
{
var virtualPathZip = virtualPath + time + "/";
string actualPathZip = Server.MapPath(virtualPathZip);
if (!Directory.Exists(actualPathZip))
{
Directory.CreateDirectory(actualPathZip);
}
destFile = fileext = "";
//第一步骤,解压
TxSmsZipHelper.UnZipFile(path, actualPathZip);
//第二步骤,获取excel文件,如果没有获取到,则抛出异常
//获得目录信息
var dir = new DirectoryInfo(actualPathZip);
//获得目录文件列表
var files = dir.GetFiles();
foreach (FileInfo fileName in files)
{
//var ext = Path.GetExtension(fileName.Name).ToLower();
//if (ext == ".xls" || ext == ".xlsx")
//{
// destFile = Path.Combine(fileName.DirectoryName, fileName.Name);
// break;
//}
destFile = virtualPathZip + fileName.Name;
fileext = Path.GetExtension(fileName.Name);
break;
}
}
return new JsonStringResult(string.Format(jsonResult, "{", 0, "上传成功", destFile, fileext.ToLower(), "}"));
}
public class JsonStringResult : ContentResult
{
public JsonStringResult(string json)
{
Content = json;
ContentType = "application/json";
}
}
}
}

再次用firefox测试如下:

jQuery.uploadify文件上传组件实例讲解

jQuery.uploadify文件上传组件实例讲解

4、注意事项

1、封装的js类库适合单文件上传

2、upload里面的登录认证是通过判断当前账号信息是否为null

3、本项目使用的abp框架,有兴趣的可以去了解下:http://www.aspnetboilerplate.com/

以上所述是小编给大家介绍的jQuery.uploadify文件上传组件实例讲解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js分解url参数(面向对象-极简主义法应用)
Aug 09 Javascript
JS操作Cookie写入和读取实例代码
Oct 20 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
Oct 29 Javascript
jquery ztree实现树的搜索功能
Feb 25 Javascript
使用jQuery给input标签设置默认值
Jun 20 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
Aug 01 Javascript
Angular2 多级注入器详解及实例
Oct 30 Javascript
浅谈JavaScript的函数及作用域
Dec 30 Javascript
对于Javascript 执行上下文的全面了解
Sep 05 Javascript
react-native中ListView组件点击跳转的方法示例
Sep 30 Javascript
Node.js 如何利用异步提升任务处理速度
Jan 07 Javascript
js中数组对象去重的两种方法
Jan 18 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
Sep 23 #Javascript
jQuery实现边框动态效果的实例代码
Sep 23 #Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
Sep 23 #Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
Sep 23 #Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
Sep 23 #Javascript
jQuery easyui刷新当前tabs的方法
Sep 23 #Javascript
AngularJS通过$location获取及改变当前页面的URL
Sep 23 #Javascript
You might like
php 过滤危险html代码
2009/06/29 PHP
juery框架写的弹窗效果适合新手
2013/11/27 Javascript
JavaScript程序员应该知道的45个实用技巧
2014/03/04 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
2015/03/05 Javascript
js设置document.domain实现跨域的注意点分析
2015/05/21 Javascript
JavaScript运算符小结
2015/06/03 Javascript
jQuery实现伪分页的方法分享
2016/02/17 Javascript
浅析创建javascript对象的方法
2016/05/13 Javascript
使用vue.js制作分页组件
2016/06/27 Javascript
你知道setTimeout是如何运行的吗?
2016/08/16 Javascript
基于JavaScript实现点击页面任何位置返回
2016/08/31 Javascript
移动适配的几种方案(三种方案)
2016/11/25 Javascript
几行js代码实现自适应
2017/02/24 Javascript
详解webpack 多入口配置
2017/06/16 Javascript
JavaScript实现公告栏上下滚动效果
2020/03/13 Javascript
JavaScript数组类型Array相关的属性与方法详解
2020/09/08 Javascript
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
python练习程序批量修改文件名
2014/01/16 Python
Python进阶-函数默认参数(详解)
2017/05/18 Python
python实现朴素贝叶斯算法
2018/11/19 Python
Python实现统计英文文章词频的方法分析
2019/01/28 Python
对IPython交互模式下的退出方法详解
2019/02/16 Python
pandas中DataFrame修改index、columns名的方法示例
2019/08/02 Python
TensorFlow Saver:保存和读取模型参数.ckpt实例
2020/02/10 Python
python爬虫爬取网页数据并解析数据
2020/09/18 Python
在 Python 中使用 7zip 备份文件的操作
2020/12/11 Python
马来西亚网上购物:Youbeli
2018/03/30 全球购物
英国快时尚女装购物网站:PrettyLittleThing
2018/08/15 全球购物
送给他或她的礼物:FUN.com
2018/08/17 全球购物
美国智能家居专家:tink
2019/06/04 全球购物
西班牙品牌鞋子、服装和配饰在线商店:Esdemarca
2021/02/17 全球购物
编写一子程序,将一链表倒序,即使链表表尾变表头,表头变表尾
2016/02/10 面试题
2014道德模范事迹材料
2014/02/16 职场文书
项目经理岗位职责
2015/01/31 职场文书
高考百日冲刺决心书
2015/09/23 职场文书
python生成可执行exe控制Microsip自动填写号码并拨打功能
2021/06/21 Python