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之大字符串的连接的StringBuffer 类
May 08 Javascript
javascript 对表格的行和列都能加亮显示
Dec 26 Javascript
传智播客学习之java 反射
Nov 22 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
Dec 29 Javascript
Javascript 判断是否存在函数的方法
Jan 03 Javascript
jquery的相对父元素和相对文档定位示例代码
Aug 02 Javascript
javascript如何判断输入的url是否正确
Apr 11 Javascript
在JS数组特定索引处指定位置插入元素
Jul 27 Javascript
JS在可编辑的div中的光标位置插入内容的方法
Nov 20 Javascript
JS只能输入正整数的简单实例
Oct 07 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
Aug 22 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
Jul 17 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
十大“创意”战术!
2020/03/04 星际争霸
九个你必须知道而且又很好用的php函数和特点
2013/08/08 PHP
从零开始学YII2框架(四)扩展插件yii2-kartikgii
2014/08/20 PHP
php取得字符串首字母的方法
2015/03/25 PHP
微信利用PHP创建自定义菜单的方法
2016/08/01 PHP
php版微信数据统计接口用法示例
2016/10/12 PHP
thinkPHP框架中layer.js的封装与使用方法示例
2019/01/18 PHP
PHP登录验证功能示例【用户名、密码、验证码、数据库、已登陆验证、自动登录和注销登录等】
2019/02/25 PHP
laravel 出现command not found问题的解决方案
2019/10/23 PHP
如何确保JavaScript的执行顺序 之jQuery.html深度分析
2011/03/03 Javascript
iframe 异步加载技术及性能分析
2011/07/19 Javascript
用JavaScript实现动画效果的方法
2013/07/20 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
2013/11/13 Javascript
javascript闭包的理解
2015/04/01 Javascript
jquery实现图片随机排列的方法
2015/05/04 Javascript
BootStrap轻松实现微信页面开发代码分享
2016/10/21 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
2017/10/26 Javascript
webpack external模块的具体使用
2018/03/10 Javascript
JavaScript设计模式之建造者模式实例教程
2018/07/02 Javascript
小程序实现左滑删除功能
2018/10/30 Javascript
小程序文字跑马灯效果
2018/12/28 Javascript
python在windows下实现备份程序实例
2014/07/04 Python
使用Python构建Hopfield网络的教程
2015/04/14 Python
Python实现通过文件路径获取文件hash值的方法
2017/04/29 Python
基于Python pip用国内镜像下载的方法
2018/06/12 Python
python实现雨滴下落到地面效果
2018/06/21 Python
Django框架自定义模型管理器与元选项用法分析
2019/07/22 Python
Lombok插件安装(IDEA)及配置jar包使用详解
2020/11/04 Python
详解H5 活动页之移动端 REM 布局适配方法
2017/12/07 HTML / CSS
琳达·法罗眼镜英国官网:Linda Farrow英国
2021/01/19 全球购物
妇产科护士自我鉴定
2013/10/15 职场文书
2014年新教师工作总结
2014/11/08 职场文书
扬州个园导游词
2015/02/06 职场文书
PHP获取学生成绩的方法
2021/11/17 PHP
Nginx性能优化之Gzip压缩设置详解(最大程度提高页面打开速度)
2022/02/12 Servers
css实现左上角飘带效果的完整代码
2022/03/18 HTML / CSS