Jquery uploadify實現文件上傳 flash方式

[img]http://dl.iteye.com/upload/attachment/559899/f83022cd-a0ee-3cfd-abe2-74f9e64b1df6.jpg[/img]
使用 Jquery的插件 uploadify 實現文件的上傳,可顯示上傳進度。。。以下是需要用到的文件:
uploadify.css
jquery.uploadify.v2.1.4.js
swfobject.js

代碼如下:


$(document).ready(function(){

//設置Flash上傳圖片的
$("#uploadify").uploadify({
'uploader':'${ctx}/scripts/dwz/uploadify/scripts/uploadify.swf',
'script':'${ctx}/fileupload/doUpload.json',
'cancelImg':'${ctx}/scripts/dwz/uploadify/cancel.png',
'folder':'/uploadFiles',
'queueID':'fileQueue',
'auto':false,
'multi':true,
'fileExt':'*.jpg;*.gif;*.png;*.JGP;*.GIF;*.PNG',
'fileDesc':'所有*.jpg;*.gif;*.png文件',
'buttonText':'browse',
'displayData':'percentage',
'onComplete':function(event,queueId,fileObj,response,data){
var temp = eval("("+response+")");
var tpxwTem = $("#tpxw").val();
//顯示上傳完成的圖片
$("#fileQueue").append('<div name="picDiv" id="'+queueId+'" class="'+temp.successFileName+'"><input type="hidden" name="tpxw" value="'+temp.successFileName+'"><input type="text" name="ymc" value="'+fileObj.name+'"/><span style="cursor: pointer;">    <font color="red">刪除</font></span><br/></div>');
$("input[name='ymc']").attr("readonly","readonly").attr("size","65").attr("class","textInput readonly");
}
});
//給每個上傳完成的圖片 添加刪除事件
$("div[name='picDiv'] span").live("click",function(){
deleteUploadFile($(this).parent().attr("id"),$(this).parent().attr("class"));
});
//處理上傳圖片
$("#doUploadButton").bind("click",function(){
$('#uploadify').uploadifyUpload();
})


});
//點擊刪除上傳成功的圖片
function deleteUploadFile(t_queueID,fileName){
var parameters = new Object();
parameters["filePath"]=fileName;
parameters["divId"]=t_queueID;
parameters["fileFolder"]="uploadFiles";
$.post("${ctx}/fileupload/deleteFile.json",parameters,function(data){
if(data["message"]=='success'){
var tempid=data["divId"];
$("#"+tempid).remove();
}
},"json");
}


<tr>
<td colspan="3"><center>
<div id="showMessDiv"></div>
<p id="uploadInfoWhenComplete" style="line-height:15px;color:#bd0a01;display:none;font-size:12px;"></p>
<div id="fileUploadDiv" style="display: none;">
<div id="fileQueue" class="fileQueue">
</div>
<input type="file" id="uploadify" name="uploadify" />
<p><br><button id="doUploadButton" onclick="return false;">上傳圖片</button>
</p>
</div></center>

</td>
</tr>
<tr id="uploadMessageTr" style="display: none;"><td colspan="3"><center><font color="red">提示 : 圖片大小不能超過1M</font></center></td></tr>
<tr><td colspan="3"> </td></tr>
<tr>
<td colspan="3">
<center>
<input type="submit" onclick="return checkSubmit();" value="保存"><input type="button" class="close" value="關閉">
</center>
</td>
</tr>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章