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获取网页中的js、css、Flash等文件
Dec 20 Javascript
科讯商业版中用到的ajax空间与分页函数
Sep 02 Javascript
Javascript查询DBpedia小应用实例学习
Mar 07 Javascript
让人蛋疼的JavaScript语法特性
Sep 30 Javascript
JavaScript实现Flash炫光波动特效
May 14 Javascript
Jquery实现动态切换图片的方法
May 18 Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 Javascript
Knockoutjs 学习系列(一)ko初体验
Jun 07 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
Mar 09 Javascript
vue之nextTick全面解析
May 17 Javascript
Vue2 模板template的四种写法总结
Feb 23 Javascript
vue总线机制(bus)知识点详解
May 10 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
YII模块实现绑定二级域名的方法
2014/07/09 PHP
php使用Jpgraph绘制3D饼状图的方法
2015/06/10 PHP
PHP的几个常用加密函数
2016/02/03 PHP
PHP常用排序算法实例小结【基本排序,冒泡排序,快速排序,插入排序】
2017/02/07 PHP
laravel解决迁移文件一次删除创建字段报错的问题
2019/10/24 PHP
jquery的map与get方法详解
2013/11/04 Javascript
解释&amp;&amp;和||在javascript中的另类用法
2014/07/28 Javascript
3个可以改善用户体验的AngularJS指令介绍
2015/06/18 Javascript
jQuery实现级联下拉框实战(5)
2017/02/08 Javascript
利用Node.js批量抓取高清妹子图片实例教程
2018/08/02 Javascript
微信小程序之swiper滑动面板用法示例
2018/12/04 Javascript
JS简单数组排序操作示例【sort方法】
2019/05/17 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
2020/11/20 Javascript
[01:26]神话结束了,却也刚刚开始——DOTA2新英雄玛尔斯驾临战场
2019/03/10 DOTA
[05:26]TI10典藏宝瓶套装外观展示
2020/07/03 DOTA
在Python 3中实现类型检查器的简单方法
2015/07/03 Python
python+matplotlib绘制旋转椭圆实例代码
2018/01/12 Python
Python实现的直接插入排序算法示例
2018/04/29 Python
Python unittest单元测试框架总结
2018/09/08 Python
老生常谈python中的重载
2018/11/11 Python
Python字符串通过'+'和join函数拼接新字符串的性能测试比较
2019/03/05 Python
Python3.5装饰器典型案例分析
2019/04/30 Python
python pytest进阶之conftest.py详解
2019/06/27 Python
python2使用bs4爬取腾讯社招过程解析
2019/08/14 Python
详解Django配置优化方法
2019/11/18 Python
python找出列表中大于某个阈值的数据段示例
2019/11/24 Python
Python 日期的转换及计算的具体使用详解
2020/01/16 Python
tensorflow 实现打印pb模型的所有节点
2020/01/23 Python
python虚拟环境模块venv使用及示例
2020/03/04 Python
Python爬虫工具requests-html使用解析
2020/04/29 Python
基于HTML5 FileSystem API的使用介绍
2013/04/24 HTML / CSS
毕业生的自我评价分享
2013/12/18 职场文书
《台湾的蝴蝶谷》教学反思
2014/02/20 职场文书
法律七进实施方案
2014/03/15 职场文书
2014年学生会干事工作总结
2014/11/07 职场文书
2015年收银工作总结范文
2015/04/01 职场文书