plupload+artdialog實(shí)現(xiàn)多平臺(tái)上傳文件
在沒(méi)介紹正文之前先給大家介紹下plupload知識(shí)
plupload簡(jiǎn)介
Plupload是有TinyMCE的開(kāi)發(fā)者開(kāi)發(fā)的，為您的內(nèi)容管理系統(tǒng)或是類(lèi)似上傳程序提供一個(gè)高度可用的上傳插件。Plupload 目前分為一個(gè)核心API 和一個(gè)jQuery上傳隊(duì)列部件，這樣使你可以直接使用或是自己定制。
plupload特性
Plupload使用jQuery的組件做為選擇文件和上傳文件的隊(duì)列組件。
Plupload使用Flash，Silverlight，HTML5，Gears，BrowserPlus、FileUpload上傳文件技術(shù)引擎。
Plupload允許自定義使用Plupload核心API來(lái)進(jìn)行選擇文件與上傳文件。
JavaScript用來(lái)激活文件選擇對(duì)話(huà)框。此文件選擇對(duì)話(huà)框是可以設(shè)置允許用戶(hù)選擇一個(gè)單獨(dú)的文件或者是多個(gè)文件。 選擇的的文件類(lèi)型也是可以被限制的，因此用戶(hù)只能選擇指定的適當(dāng)?shù)奈募?，例如jgp;gif。
Plupload允許對(duì)上傳過(guò)程中的一些事件進(jìn)行自定義，寫(xiě)上自己的處理方式。
選定的文件的上傳和它所在頁(yè)面、表單是獨(dú)立的。每個(gè)文件都是單獨(dú)上傳的，這就保證了服務(wù)端腳本能夠在一個(gè)時(shí)間點(diǎn)更容易地處理單個(gè)文件。具體信息可以訪問(wèn)Plupload官方網(wǎng)站：http://www.plupload.com/
背景：本來(lái)項(xiàng)目中使用的前端文件上傳控件是uploadify，一切相安無(wú)事了一段時(shí)間后?，F(xiàn)場(chǎng)傳來(lái)”喜訊“，客戶(hù)要用ipad使用系統(tǒng)，還想上傳圖片?？蛻?hù)老爺一拍腦門(mén)，研發(fā)就要加班加點(diǎn)。大家知道uploadify是依賴(lài)flash的，所以在ios，mac系統(tǒng)上都不行。于是，經(jīng)過(guò)一番google，找到了plupload。上手比較簡(jiǎn)單。
頁(yè)面html代碼：
head標(biāo)簽中包含必要的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標(biāo)簽中的頁(yè)面元素
<!-- 觸發(fā)彈出框 --> <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>單個(gè)文件支持小于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標(biāo)簽中的代碼
var globalUploader;
function _plupload(){
var uploader = new plupload.Uploader({
runtimes : 'html5,flash,silverlight,html4',
browse_button: 'uploadify', //頁(yè)面上瀏覽文件的DOM對(duì)象的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: [//限制上傳文件類(lèi)型
{title : "Image files", extensions : "jpg,gif,png"}
]
},
init: {
PostInit: function() {
$('#uploadfileQueue').html('');
},
UploadFile : function(up,file){//BeforeUpload后觸發(fā)
},
BeforeUpload : function(up,file){//點(diǎn)擊按鈕后上傳前觸發(fā)，此處可以做查詢(xún)同名文件，檢查剩余空間等操作
//檢查是否有重名文件，有則直接在文件名末尾加個(gè)括號(hào)和數(shù)字以示區(qū)分
$.ajax({
url:"/folder/personal/personalAction!getNewFileName.action",
type:"POST",
async:false,
data:{'upFileName' : file.name, 'globalPid' : globalPid},
dataType:"json",
success:function(data){
//上傳前設(shè)置參數(shù)
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("對(duì)不起，文件["+file.name+"]上傳準(zhǔn)備失敗",'');
// $('#uploadify').uploadify('cancel',file.id);//按id取消某個(gè)上傳任務(wù)
}
});
},
FileFiltered: function(up, file){
//選擇文件后觸發(fā)
},
FilesAdded: function(up, files) {//文件添加到隊(duì)列中
var i = 0;//記錄文件列表編號(hào)，刪除用
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) {//點(diǎn)擊開(kāi)始上傳后觸發(fā)，此處可以添加進(jìn)度條，利用file.percent
document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>-' + file.percent + "%</span>";//百分比
$('#' + file.id).find('.uploadify-progress-bar').css('width', file.percent + '%');//進(jìn)度條
},
Error: function(up, err) {//出錯(cuò)觸發(fā)
document.getElementById('console').innerHTML += "\n錯(cuò)誤 #" + err.code + ": " + err.message;
},
FileUploaded: function(up, file, info) {//一個(gè)文件上傳完觸發(fā)
// Fires when a file is successfully uploaded.
data = eval( "(" + info.response + ")" );//服務(wù)器返回的數(shù)據(jù),此處可以修改頁(yè)面上的文件列表等
},
UploadComplete: function(up, files){//所有文件上傳完觸發(fā)
//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: '開(kāi)始上傳',
focus:true,
callback: function(){
globalUploader.start();
return false;
}
},{
name: '關(guān)閉',
callback: function(){
$('#uploadfileQueue').html('');//刪掉上傳隊(duì)列的內(nèi)容
globalUploader.files.splice(0,globalUploader.files.length);//清除上傳隊(duì)列中的內(nèi)容
return true;
}
}],
close: function(){
$('#uploadfileQueue').html('');//刪掉上傳隊(duì)列的內(nèi)容
globalUploader.files.splice(0,globalUploader.files.length);//清除上傳隊(duì)列中的內(nèi)容
}
});
}
$(function(){
$('#uploadBtn').click(function(){
popUpDialog();
});
_plupload();
});
后臺(tái)代碼就不寫(xiě)了，我用的struts2后臺(tái)action中使用private File file接收的文件，改其他名字就是null，目前還不知道怎么設(shè)置控件中的這個(gè)值
然后效果就是這個(gè)樣子
想要進(jìn)度條需要加上這些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的刪除隊(duì)列里文件的叉叉，好吧
在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;
}
當(dāng)然還得加上刪除的js代碼。這里官方api里面有removeFile(file)但是，用再這里不太好使。于是使用了另一個(gè)方法splice(num,length),num是從第幾個(gè)開(kāi)始刪，length是刪除的個(gè)數(shù)。
function _plupload_removeFile(removeNum,fileId){
globalUploader.files.splice(removeNum,1);//刪除部分文件
$(fileId).fadeOut();
}
最終效果。
以上所述是小編給大家介紹的plupload+artdialog實(shí)現(xiàn)多平臺(tái)上傳文件，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
- 分享2個(gè)jQuery插件--jquery.fileupload與artdialog
- artdialog的圖片/標(biāo)題以及關(guān)閉按鈕不顯示的解決方法
- 給artDialog 5.02 增加ajax get功能詳細(xì)介紹
- artDialog 4.1.5 Dreamweaver代碼提示/補(bǔ)全插件 附下載
- artDialog雙擊會(huì)關(guān)閉對(duì)話(huà)框的修改過(guò)程分享
- JS中artdialog彈出框控件之提交表單思路詳解
- jQuery validate+artdialog+jquery form實(shí)現(xiàn)彈出表單思路詳解
- artDialog+plupload實(shí)現(xiàn)多文件上傳
- jQuery對(duì)話(huà)框插件ArtDialog在雙擊遮罩層時(shí)出現(xiàn)關(guān)閉現(xiàn)象的解決方法
- Jquery彈出窗口插件 LeanModal的使用方法
- 使用jQuery插件創(chuàng)建常規(guī)模態(tài)窗口登陸效果
- jQuery插件artDialog.js使用與關(guān)閉方法示例
相關(guān)文章
這里列出了一些JS重要知識(shí)點(diǎn)（不全面，但自己感覺(jué)很重要）。徹底理解并掌握這些知識(shí)點(diǎn)，對(duì)于每個(gè)想要深入學(xué)習(xí)JS的朋友應(yīng)該都是必須的2011-11-11
前端實(shí)現(xiàn)類(lèi)似chatgpt的對(duì)話(huà)頁(yè)面(案例)
這篇文章主要介紹了前端實(shí)現(xiàn)類(lèi)似chatgpt的對(duì)話(huà)頁(yè)面(案例),需要的朋友可以參考下2023-03-03
uni-app彈出層uni-popup使用及修改默認(rèn)樣式的方法實(shí)例
我們?cè)谑褂胾niapp開(kāi)發(fā)的時(shí)候,有時(shí)可以使用uniapp自有的樣式模板,這樣可以提高開(kāi)發(fā)效率,下面這篇文章主要給大家介紹了關(guān)于uni-app彈出層uni-popup使用及修改默認(rèn)樣式的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了基于JavaScript介紹性能爆表的SolidJS，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下2022-09-09
這篇文章主要介紹了javascript如何判斷輸入的url是否正確,需要的朋友可以參考下2014-04-04
小程序提供了豐富的基礎(chǔ)組件給開(kāi)發(fā)者,開(kāi)發(fā)者可以像搭積木一樣,組合各種組件拼合成自己的小程序,下面這篇文章主要給大家介紹了關(guān)于微信小程序視圖容器和基本內(nèi)容組件的相關(guān)資料,需要的朋友可以參考下2022-07-07
js自調(diào)用匿名函數(shù)的三種寫(xiě)法(推薦)
下面小編就為大家?guī)?lái)一篇js自調(diào)用匿名函數(shù)的三種寫(xiě)法(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
獲取Javscript執(zhí)行函數(shù)名稱(chēng)的方法
獲取Javscript執(zhí)行函數(shù)名稱(chēng)的方法...2006-12-12
js讀取json的方法或許很多，但常用的就那兩種，本文以示例代碼的方式為大家介紹下其具體的實(shí)現(xiàn)2014-10-10
使用watch在微信小程序中實(shí)現(xiàn)全局狀態(tài)共享
這篇文章主要給大家介紹了關(guān)于如何使用watch在小程序中實(shí)現(xiàn)全局狀態(tài)共享的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06