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数组中如何随机取出一个值
Jun 13 Javascript
Visual Studio中js调试的方法图解
Jun 30 Javascript
AngularJS ng-bind-template 指令详解
Jul 30 Javascript
利用Vue.js实现checkbox的全选反选效果
Jan 18 Javascript
BootStrap TreeView使用实例详解
Nov 01 Javascript
vue-cli axios请求方式及跨域处理问题
Mar 28 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
Dec 28 Javascript
微信小程序image图片加载完成监听
Aug 31 Javascript
vue3修改link标签默认icon无效问题详解
Oct 09 Javascript
微信小程序入门之指南针
Oct 22 Javascript
JavaScript实现栈结构详细过程
Dec 06 Javascript
Vue的生命周期一起来看看
Feb 24 Vue.js
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防注入安全代码
2008/04/09 PHP
PHP根据IP地址获取所在城市具体实现
2013/11/27 PHP
php使用cookie实现记住用户名和密码实现代码
2015/04/27 PHP
php+js实现百度地图多点标注的方法
2016/11/30 PHP
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
2011/01/12 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2011/09/13 Javascript
常用Extjs工具:Extjs.util.Format使用方法
2012/03/22 Javascript
浅析return false的正确使用
2013/11/04 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
2014/01/13 Javascript
用console.table()调试javascript
2014/09/04 Javascript
jquery中添加属性和删除属性
2015/06/03 Javascript
网页收藏夹显示ICO图标(代码少)
2015/08/04 Javascript
基于jquery实现省市联动特效
2015/12/17 Javascript
Centos7 中安装 Node.js v4.4.4
2016/11/03 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
2018/09/18 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
详解vue如何使用rules对表单字段进行校验
2018/10/17 Javascript
JS前端模块化原理与实现方法详解
2020/03/17 Javascript
webpack+vue.js构建前端工程化的详细教程
2020/05/10 Javascript
介绍Python的Django框架中的静态资源管理器django-pipeline
2015/04/25 Python
简述Python中的面向对象编程的概念
2015/04/27 Python
Django 多环境配置详解
2019/05/14 Python
python语言基本语句用法总结
2019/06/11 Python
python内打印变量之%和f的实例
2020/02/19 Python
Django实现将views.py中的数据传递到前端html页面,并展示
2020/03/16 Python
python基于selenium爬取斗鱼弹幕
2021/02/20 Python
女士时装鞋:Chinese Laundry
2018/08/29 全球购物
毕业生的自我评价
2013/12/30 职场文书
光盘行动倡议书
2014/02/02 职场文书
四年级科学教学反思
2014/02/10 职场文书
责任胜于能力演讲稿
2014/05/20 职场文书
教师专业技术工作总结2015
2015/05/13 职场文书
《钓鱼的启示》教学反思
2016/02/18 职场文书
Lombok的详细使用及优缺点总结
2021/07/15 Java/Android
Pandas实现DataFrame的简单运算、统计与排序
2022/03/31 Python
解决vue自定义组件@click点击失效问题
2022/04/30 Vue.js