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 相关文章推荐
Prototype使用指南之ajax
Jan 10 Javascript
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
Aug 09 Javascript
JavaScript 继承详解 第一篇
Aug 30 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
Nov 21 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
Jan 06 Javascript
window.showModalDialog()返回值的学习心得总结
Jan 07 Javascript
js中opener与parent的区别详细解析
Jan 14 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
Jun 22 Javascript
JS实现上传图片实时预览功能
May 22 Javascript
JS实现简单的浮动碰撞效果示例
Dec 28 Javascript
详解angular2 控制视图的封装模式
Dec 27 Javascript
关于Node.js中频繁修改代码重启服务器的问题
Oct 15 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
php流量统计功能的实现代码
2012/09/29 PHP
PHP生成不同颜色、不同大小的tag标签函数
2013/09/23 PHP
PHP实现的连贯操作、链式操作实例
2014/07/08 PHP
PHP连接MSSQL时nvarchar字段长度被截断为255的解决方法
2014/12/25 PHP
PHP创建文件,并向文件中写入数据,覆盖,追加的实现代码
2016/03/25 PHP
php自定义排序uasort函数示例【二维数组按指定键值排序】
2019/06/19 PHP
tp5修改(实现即点即改)
2019/10/18 PHP
JavaScript中的作用域链和闭包
2012/06/30 Javascript
JS判断客服QQ号在线还是离线状态的方法
2015/01/13 Javascript
Javascript中的方法链(Method Chaining)介绍
2015/03/15 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
2016/11/07 Javascript
正则 js分转元带千分符号详解
2017/03/08 Javascript
JS实现汉字与Unicode码相互转换的方法详解
2017/04/28 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
2018/08/24 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
JavaScript实现随机点名器
2020/03/25 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
2020/09/04 Javascript
js对象属性名驼峰式转下划线的实例代码
2020/09/17 Javascript
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
Python读写ini文件的方法
2015/05/28 Python
Python中几个比较常见的名词解释
2015/07/04 Python
Python实现基于TCP UDP协议的IPv4 IPv6模式客户端和服务端功能示例
2018/03/22 Python
python根据文本生成词云图代码实例
2019/11/15 Python
python中adb有什么功能
2020/06/07 Python
Android Q之气泡弹窗的实现示例
2020/06/23 Python
python使用re模块爬取豆瓣Top250电影
2020/10/20 Python
解决pycharm导入numpy包的和使用时报错:RuntimeError: The current Numpy installation (‘D:\\python3.6\\lib\\site-packa的问题
2020/12/08 Python
英国珠宝钟表和家居礼品精品店:David Shuttle
2018/02/24 全球购物
机械设计专业应届生求职信
2013/11/21 职场文书
门卫岗位安全职责
2013/12/13 职场文书
感恩之星事迹材料
2014/05/03 职场文书
民主评议党员自我评价材料
2014/09/18 职场文书
HR在给员工开具离职证明时,需要注意哪些问题?
2019/07/03 职场文书
2019假期福利管理制度!
2019/07/15 职场文书
2019年年中职场激励人心语录30条
2019/08/07 职场文书
Python IO文件管理的具体使用
2022/03/20 Python