plupload+artdialog实现多平台上传文件


Posted in Javascript onJuly 19, 2016

在没介绍正文之前先给大家介绍下plupload知识

plupload简介

Plupload是有TinyMCE的开发者开发的,为您的内容管理系统或是类似上传程序提供一个高度可用的上传插件。Plupload 目前分为一个核心API 和一个jQuery上传队列部件,这样使你可以直接使用或是自己定制。

plupload特性

Plupload使用jQuery的组件做为选择文件和上传文件的队列组件。

Plupload使用Flash,Silverlight,HTML5,Gears,BrowserPlus、FileUpload上传文件技术引擎。

Plupload允许自定义使用Plupload核心API来进行选择文件与上传文件。

JavaScript用来激活文件选择对话框。此文件选择对话框是可以设置允许用户选择一个单独的文件或者是多个文件。 选择的的文件类型也是可以被限制的,因此用户只能选择指定的适当的文件,例如jgp;gif。

Plupload允许对上传过程中的一些事件进行自定义,写上自己的处理方式。

选定的文件的上传和它所在页面、表单是独立的。每个文件都是单独上传的,这就保证了服务端脚本能够在一个时间点更容易地处理单个文件。具体信息可以访问Plupload官方网站:http://www.plupload.com/

背景:本来项目中使用的前端文件上传控件是uploadify,一切相安无事了一段时间后。现场传来”喜讯“,客户要用ipad使用系统,还想上传图片。客户老爷一拍脑门,研发就要加班加点。大家知道uploadify是依赖flash的,所以在ios,mac系统上都不行。于是,经过一番google,找到了plupload。上手比较简单。

页面html代码:

head标签中包含必要的js文件

<script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script>
<!-- art dialog -->
<script type="text/javascript" src="artdialog/artDialog.source.js?skin=blue"></script>
<!-- plupload -->
<script type="text/javascript" src="plupload/plupload.full.js"></script>

body标签中的页面元素

<!-- 触发弹出框 -->
<a id="uploadBtn" class="optionbtn inline" href="#">文件上传</a>
<div id="uploadContent" class="" style="display:none;height:300px;overflow-x:hidden;overflow-y:auto;">
<div id="choosefile">
<span>单个文件支持小于100M</span><br/>
<a id="uploadify" href="javascript:void(0);">选择文件</a>
</div> 
<div id="uploadfileQueue" style="border: 1px solid #a7c5e2;height: 228px;width: 350px;">
</div>
</div><pre id="console"></pre>

script标签中的代码

var globalUploader;
function _plupload(){
var uploader = new plupload.Uploader({
runtimes : 'html5,flash,silverlight,html4',
browse_button: 'uploadify', //页面上浏览文件的DOM对象的id属性
container: 'uploadContent',//包含browse_button的div
url: '/uploadAction!localUpload.action',//接收文件上传的action
flash_swf_url : '/folder/js/plupload/Moxie.swf',
silverlight_xap_url : '/folder/js/plupload/Moxie.xap',
filters : {
max_file_size : '100mb',//限制上传文件大小
mime_types: [//限制上传文件类型
{title : "Image files", extensions : "jpg,gif,png"}
]
},
init: {
PostInit: function() {
$('#uploadfileQueue').html('');
},
UploadFile : function(up,file){//BeforeUpload后触发
},
BeforeUpload : function(up,file){//点击按钮后上传前触发,此处可以做查询同名文件,检查剩余空间等操作
//检查是否有重名文件,有则直接在文件名末尾加个括号和数字以示区分
$.ajax({
url:"/folder/personal/personalAction!getNewFileName.action",
type:"POST",
async:false,
data:{'upFileName' : file.name, 'globalPid' : globalPid},
dataType:"json",
success:function(data){
//上传前设置参数
up.setOption('multipart_params', {
upFileName : data.newFileName, 
upFileType : file.name.split(".")[file.name.split(".").length - 1],//后缀
upFileSize : file.size,
parentId : globalPid
});
},
error:function(XMLHttpRequest, textStatus, errorThrown){
messageAlert("对不起,文件["+file.name+"]上传准备失败",'');
// $('#uploadify').uploadify('cancel',file.id);//按id取消某个上传任务
}
});
},
FileFiltered: function(up, file){
//选择文件后触发
},
FilesAdded: function(up, files) {//文件添加到队列中
var i = 0;//记录文件列表编号,删除用
plupload.each(files, function(file) {
$('#uploadfileQueue').html($('#uploadfileQueue').html() + 
'<div id="' + file.id + '" class="uploadify-queue-item"><div class="cancel"><a href="javascript:_plupload_removeFile('+i+','+file.id+')"></a></div><span class="fileName">' + file.name + 
' (' + plupload.formatSize(file.size) + ')</span><b></b><div class="uploadify-progress"><div class="uploadify-progress-bar"></div></div></div>');
i ++;
});
},
UploadProgress: function(up, file) {//点击开始上传后触发,此处可以添加进度条,利用file.percent
document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>-' + file.percent + "%</span>";//百分比
$('#' + file.id).find('.uploadify-progress-bar').css('width', file.percent + '%');//进度条
},
Error: function(up, err) {//出错触发
document.getElementById('console').innerHTML += "\n错误 #" + err.code + ": " + err.message;
},
FileUploaded: function(up, file, info) {//一个文件上传完触发
// Fires when a file is successfully uploaded.
data = eval( "(" + info.response + ")" );//服务器返回的数据,此处可以修改页面上的文件列表等
},
UploadComplete: function(up, files){//所有文件上传完触发
//Fires when all files in a queue are uploaded.
}
}
});
uploader.init();
globalUploader = uploader;
}
function popUpDialog(){
artDialog({
id: 'file-upload',
title: '文件上传',
fixed: true,
lock: true,
content: $("#uploadContent")[0],
button:[{
name: '开始上传',
focus:true,
callback: function(){
globalUploader.start();
return false;
}
},{
name: '关闭',
callback: function(){
$('#uploadfileQueue').html('');//删掉上传队列的内容
globalUploader.files.splice(0,globalUploader.files.length);//清除上传队列中的内容
return true;
}
}],
close: function(){
$('#uploadfileQueue').html('');//删掉上传队列的内容
globalUploader.files.splice(0,globalUploader.files.length);//清除上传队列中的内容
}
});
}
$(function(){
$('#uploadBtn').click(function(){
popUpDialog();
});
_plupload();
});

后台代码就不写了,我用的struts2后台action中使用private File file接收的文件,改其他名字就是null,目前还不知道怎么设置控件中的这个值

然后效果就是这个样子

plupload+artdialog实现多平台上传文件

想要进度条需要加上这些css样式,就是已有控制

<style type="text/css">
#uploadfileQueue {
position: relative;
left: 0;
top: 0;
border: 1px solid #a7c5e2;
margin-bottom: 5px;
height: 228px;
width: 350px;
overflow-x: hidden;
overflow-y: auto;
}
.uploadify-queue-item {
/* background-color: #F5F5F5; */
background-color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font: 11px Verdana, Geneva, sans-serif;
/* margin-top: 5px; */
margin: 5px 5px 5px 5px;
max-width: 350px;
padding: 10px;
}
.uploadify-progress {
background-color: #E5E5E5;
margin-top: 10px;
width: 100%;
}
.uploadify-progress-bar {
background-color: #0099FF;
height: 3px;
width: 1px;
}
</style>

最后的效果。什么,还想要uploadify的删除队列里文件的叉叉,好吧

plupload+artdialog实现多平台上传文件

在style里再加上这段

.uploadify-queue-item .cancel a {
background: url('js/uploadify-cancel.png') 0 0 no-repeat;
float: right;
height: 16px;
text-indent: -9999px;
width: 16px;
}

当然还得加上删除的js代码。这里官方api里面有removeFile(file)但是,用再这里不太好使。于是使用了另一个方法splice(num,length),num是从第几个开始删,length是删除的个数。

function _plupload_removeFile(removeNum,fileId){
globalUploader.files.splice(removeNum,1);//删除部分文件
$(fileId).fadeOut();
}

plupload+artdialog实现多平台上传文件

最终效果。

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

Javascript 相关文章推荐
JavaScript 计算图片加载数量的代码
Jan 01 Javascript
基于jquery的web页面日期格式化插件
Nov 15 Javascript
用jQuery模拟页面加载进度条的实现代码
Dec 19 Javascript
JavaScript中的substr()方法使用详解
Jun 06 Javascript
jQuery Easyui实现左右布局
Jan 26 Javascript
全面总结Javascript对数组对象的各种操作
Jan 22 Javascript
javascript 中null和undefined区分和比较
Apr 19 Javascript
详解基于vue的移动web app页面缓存解决方案
Aug 03 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
Aug 27 Javascript
详解angularjs跨页面传参遇到的一些问题
Nov 01 Javascript
详解vue3.0 diff算法的使用(超详细)
Jul 01 Javascript
使用js和canvas实现时钟效果
Sep 08 Javascript
如何在JS中实现相互转换XML和JSON
Jul 19 #Javascript
js 动态给元素添加、移除事件的实现方法
Jul 19 #Javascript
js实现动态创建的元素绑定事件
Jul 19 #Javascript
用js动态添加html元素,以及属性的简单实例
Jul 19 #Javascript
详谈JS中实现种子随机数及作用
Jul 19 #Javascript
全面了解JavaScript对象进阶
Jul 19 #Javascript
EasyUI中在表单提交之前进行验证
Jul 19 #Javascript
You might like
一个显示某段时间内每个月的方法 返回由这些月份组成的数组
2012/05/16 PHP
php图像处理类实例
2015/07/28 PHP
PHP开启目录引索+fancyindex漂亮目录浏览带搜索功能
2019/09/23 PHP
找出字符串中出现次数最多的字母和出现次数精简版
2012/11/07 Javascript
window.addEventListener来解决让一个js事件执行多个函数
2012/12/26 Javascript
document.forms[].submit()使用介绍
2014/02/19 Javascript
js获取客户端网卡的IP地址、MAC地址
2014/03/26 Javascript
js取模(求余数)隔行变色
2014/05/15 Javascript
基于jquery实现下拉框美化特效
2016/02/02 Javascript
Bootstrap进度条组件知识详解
2016/05/01 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
2016/08/01 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
2016/11/26 Javascript
javascript中的try catch异常捕获机制用法分析
2016/12/14 Javascript
javascript+jQuery实现360开机时间显示效果
2017/11/03 jQuery
JavaScript数组特性与实践应用深入详解
2018/12/30 Javascript
vue解决使用$http获取数据时报错的问题
2019/10/30 Javascript
Openlayers实现地图全屏显示
2020/09/28 Javascript
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
[01:06]DOTA2小知识课堂 Ep.02 吹风竟可解梦境缠绕
2019/12/05 DOTA
Python使用面向对象方式创建线程实现12306售票系统
2015/12/24 Python
利用Python批量压缩png方法实例(支持过滤个别文件与文件夹)
2017/07/30 Python
python3.6+django2.0开发一套学员管理系统
2018/03/03 Python
Python实现的线性回归算法示例【附csv文件下载】
2018/12/29 Python
详解Django模版中加载静态文件配置方法
2019/07/21 Python
利用Python检测URL状态
2019/07/31 Python
python实现梯度法 python最速下降法
2020/03/24 Python
纯CSS3代码实现switch滑动开关按钮效果
2016/08/30 HTML / CSS
SheIn沙特阿拉伯:女装在线
2020/03/23 全球购物
英国珠宝网站Argento: PANDORA、Olivia Burton和Nomination等
2020/05/08 全球购物
日期和时间问题
2015/01/04 面试题
承办会议欢迎词
2014/01/17 职场文书
日语专业个人求职信范文
2014/02/02 职场文书
导游个人求职信范文
2014/03/23 职场文书
校园文明标语
2014/06/13 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书
幽默导游词应该怎么写?
2019/08/26 职场文书