上傳外掛,較輕量級,帶進度條 jquery.uploadify
阿新 • • 發佈:2019-01-10
jquery.uploadify+upload.js
upload.js
一個比較通用的js
jsp中引用這三個js,然後注意form表單的id和name,最後提交做成按鈕形式,因為
upload.js
//附件的路徑 var adjunctPath=''; //附件上傳失敗則不能儲存 var canSubmit=true; var uploadify=$("#uploadify"); var uploader=""; function getRootPath(){ var pathName=window.document.location.pathname; //獲取帶"/"的專案名,如:/uimcardprj var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1); return(projectName); } function prepareUpload(uploadFold,size){ uploader=$("#uploadify").uploadify({ 'auto' : false, 'swf' : getRootPath()+'/resources/js/upload/uploadify.swf', //這個的作用是為了上傳 'uploader' : getRootPath()+'/book/upload', 'formData' : {"fold":uploadFold}, 'queueID' : 'fileQueue',//與下面的id對應 'queueSizeLimit' : size, 'fileTypeDesc' : '*.png;*.gif;*.jpg;*.bmp;*.jpeg;', 'fileTypeExts' : '*.png;*.gif;*.jpg;*.bmp;*.jpeg;', //控制可上傳檔案的副檔名,啟用本項時需同時宣告fileDesc 'multi' : true, 'buttonText' : '新增圖片', 'cancel' : getRootPath()+'/resources/js/upload/uploadify-cancel.png', 'onUploadSuccess':function(file, data, response){//上傳成功後獲得回撥函式,這裡為了取得檔案上傳成功後的儲存路徑 // adjunctPath+=data+";"; adjunctPath+=data; //這裡就呼叫了onUploadSuccess(),在另一js中有定義 onUploadSuccess(); }, 'onUploadError':function(file, errorCode, errorMsg, errorString){//上傳錯誤的資訊 canSubmit=false; onUploadError(); }, 'onQueueComplete' : function(queueData) {//上傳佇列全部完成後執行的回撥函式 onQueueComplete(); }, 'onSelect':function(file){ onSelect(file); } } ); }
一個比較通用的js
$(function(){ prepareUpload("",1); //提交表單 $("#submitBtn").click(function(){ //驗證表單 if($("#dataForm").valid()){ if($("#fileQueue").text()!=''){ var date=new Date(); var fold=date.format("yyyyMMddhhmmss")+"_"+$("#name").val(); //開始上傳 $("#uploadify").uploadify("settings","formData",{'fold':fold}); $('#uploadify').uploadify('upload','*'); }else{ //setVMessage("請選擇要上傳的課件!"); alert("請選擇要上傳的圖片!"); } } }); }); /** * 日期格式化,格式化為自己想要的,如20140527 */ Date.prototype.format = function(format){ var o = { "M+" : this.getMonth()+1, //month "d+" : this.getDate(), //day "h+" : this.getHours(), //hour "m+" : this.getMinutes(), //minute "s+" : this.getSeconds(), //second "q+" : Math.floor((this.getMonth()+3)/3), //quarter "S" : this.getMilliseconds() //millisecond } if(/(y+)/.test(format)) { format = format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); } for(var k in o) { if(new RegExp("("+ k +")").test(format)) { format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length)); } } return format; } /* * 上傳外掛的方法過載 * * start */ function onSelect(file){ var fileName=file.name; fileName=fileName.substring(0,fileName.lastIndexOf(".")); //給id="name"注入值,為fileName $("#name").val(fileName); } function onUploadSuccess(){ //給id = "dirPath"注入值,為儲存的位置,在upload.js中可以看到 $("#dirPath").val(adjunctPath); //upload.js有這麼一句話: //附件上傳失敗則不能儲存 //var canSubmit=true; if(canSubmit){ document.dataForm.submit(); } }
jsp中引用這三個js,然後注意form表單的id和name,最後提交做成按鈕形式,因為
$("#submitBtn").click(function(){
<style type="text/css"> .uploadify-button { background-color: transparent; border: none; padding: 0; } .uploadify:hover .uploadify-button { background-color: transparent; } </style>
<input type = "hidden" id = "dirPath" name= "dirPath" />
<table>
<tr>
<th>選擇封面插圖:</th>
<td><input type="file" name="uploadify" id="uploadify" />
<h6>*只支援單個圖片上傳</h6>
<div id="fileQueue"></div></td>
</tr>
<tr>