在沒介紹正文之前先給大家介紹下plupload知識
plupload簡介
Plupload是有TinyMCE的開發(fā)者開發(fā)的，為您的內容管理系統(tǒng)或是類似上傳程序提供一個高度可用的上傳插件。Plupload 目前分為一個核心API 和一個jQuery上傳隊列部件，這樣使你可以直接使用或是自己定制。
plupload特性
Plupload使用jQuery的組件做為選擇文件和上傳文件的隊列組件。
Plupload使用Flash，Silverlight，HTML5，Gears，BrowserPlus、FileUpload上傳文件技術引擎。
Plupload允許自定義使用Plupload核心API來進行選擇文件與上傳文件。
JavaScript用來激活文件選擇對話框。此文件選擇對話框是可以設置允許用戶選擇一個單獨的文件或者是多個文件。 選擇的的文件類型也是可以被限制的，因此用戶只能選擇指定的適當?shù)奈募鏹gp;gif。
Plupload允許對上傳過程中的一些事件進行自定義，寫上自己的處理方式。
選定的文件的上傳和它所在頁面、表單是獨立的。每個文件都是單獨上傳的，這就保證了服務端腳本能夠在一個時間點更容易地處理單個文件。具體信息可以訪問Plupload官方網(wǎng)站：http://www.plupload.com/
背景：本來項目中使用的前端文件上傳控件是uploadify，一切相安無事了一段時間后。現(xiàn)場傳來”喜訊“，客戶要用ipad使用系統(tǒng)，還想上傳圖片。客戶老爺一拍腦門，研發(fā)就要加班加點。大家知道uploadify是依賴flash的，所以在ios，mac系統(tǒng)上都不行。于是，經(jīng)過一番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標簽中的頁面元素
<!-- 觸發(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>單個文件支持小于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的divurl: '/uploadAction!localUpload.action',//接收文件上傳的actionflash_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后觸發(fā)},BeforeUpload : function(up,file){//點擊按鈕后上傳前觸發(fā)，此處可以做查詢同名文件，檢查剩余空間等操作//檢查是否有重名文件，有則直接在文件名末尾加個括號和數(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ù)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){//選擇文件后觸發(fā)},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) {//點擊開始上傳后觸發(fā)，此處可以添加進度條，利用file.percentdocument.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) {//出錯觸發(fā)document.getElementById('console').innerHTML += "/n錯誤 #" + err.code + ": " + err.message;},FileUploaded: function(up, file, info) {//一個文件上傳完觸發(fā)// Fires when a file is successfully uploaded.data = eval( "(" + info.response + ")" );//服務器返回的數(shù)據(jù),此處可以修改頁面上的文件列表等},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: '開始上傳',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，目前還不知道怎么設置控件中的這個值
然后效果就是這個樣子
想要進度條需要加上這些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的刪除隊列里文件的叉叉，好吧
在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是刪除的個數(shù)。
function _plupload_removeFile(removeNum,fileId){globalUploader.files.splice(removeNum,1);//刪除部分文件$(fileId).fadeOut();}
最終效果。
以上所述是小編給大家介紹的plupload+artdialog實現(xiàn)多平臺上傳文件，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點
疑難解答
