plupload+artdialog实现多平台上传文件
前端之家收集整理的这篇文章主要介绍了
plupload+artdialog实现多平台上传文件，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
plupload简介
Plupload是有TinyMCE的开发者开发的，为您的内容管理系统或是类似上传程序提供一个高度可用的上传插件。Plupload 目前分为一个核心API 和一个jQuery上传队列部件，这样使你可以直接使用或是自己定制。
plupload特性
Plupload使用jQuery的组件做为选择文件和上传文件的队列组件。
Plupload使用Flash，Silverlight，HTML5，Gears，BrowserPlus、FileUpload上传文件技术引擎。
Plupload允许自定义使用Plupload核心API来进行选择文件与上传文件。
JavaScript用来激活文件选择对话框。此文件选择对话框是可以设置允许用户选择一个单独的文件或者是多个文件。 选择的的文件类型也是可以被限制的，因此用户只能选择指定的适当的文件，例如jgp;gif。
Plupload允许对上传过程中的一些事件进行自定义，写上自己的处理方式。
选定的文件的上传和它所在页面、表单是独立的。每个文件都是单独上传的，这就保证了服务端脚本能够在一个时间点更容易地处理单个文件。具体信息可以访问Plupload官方网站：
背景：本来项目中使用的前端文件上传控件是uploadify，一切相安无事了一段时间后。现场传来”喜讯“，客户要用ipad使用系统，还想上传图片。客户老爷一拍脑门，研发就要加班加点。大家知道uploadify是依赖flash的，所以在ios，mac系统上都不行。于是，经过一番google，找到了plupload。上手比较简单。
页面html代码：
head标签中包含必要的js文件
body标签中的页面元素
script标签中的代码
');
i ++;
});
},UploadProgress: function(up,file) {//点击开始
上传后触发，此处可以
添加进度条，利用file.percent
document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '
-' + file.percent + "%";//百分比
$('#' + 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();
});
