在網(wǎng)上搜索了一下,發(fā)現(xiàn)以jquery+ajax方式實(shí)現(xiàn)單張圖片上傳的代碼是有的,但實(shí)現(xiàn)批量上傳圖片的程序卻沒搜索到,于是根據(jù)搜索到的代碼,寫了一個(gè)可以批量上傳的。
先看效果圖
點(diǎn)擊增加按鈕,會增加一個(gè)選擇框,如下圖:
選擇要上傳的圖片,效果圖如下:
上傳成功如下圖:
下面來看代碼:
前臺html主要代碼:
代碼如下:
<button id="SubUpload" class="ManagerButton" onClick="TSubmitUploadImageFile();return false;">確定上傳</button>
<button id="CancelUpload" class="ManagerButton" onClick="javascript:history.go(-1);">取消</button>
<button id="AddUpload" class="ManagerButton" onClick="TAddFileUpload();return false;">增加</button>
<tr><td class="tdClass">
圖片1:
</td><td class="tdClass">
<input name="" size="60" id="uploadImg1" type="file" />
<span id="uploadImgState1"></span>
</td></tr>
因?yàn)橛昧薐Query,所以你完全可以把click事件放在js文件中
“增加”按鈕js代碼:
代碼如下:
var TfileUploadNum=1; //記錄圖片選擇框個(gè)數(shù)
var Tnum=1; //ajax上傳圖片時(shí)索引
function TAddFileUpload()
{
var idnum = TfileUploadNum+1;
var str="<tr><td class='tdClass'>圖片"+idnum+":</td>";
str += "<td class='tdClass'><input name='' size='60' id='uploadImg"+idnum+"' type='file' /><span id='uploadImgState"+idnum+"'>";
str += "</span></td></tr>";
("#imgTable").append(str);
TfileUploadNum += 1;
}
“確定上傳”按鈕js代碼:
代碼如下:
function TSubmitUploadImageFile()
{
M("SubUpload").disabled=true;
M("CancelUpload").disabled=true;
M("AddUpload").disabled=true;
setTimeout("TajaxFileUpload()",1000);//此為關(guān)鍵代碼
}
關(guān)于setTimeout("TajaxFileUpload()",1000);這句代碼:因?yàn)樗^的批量上傳,其實(shí)還是一個(gè)一個(gè)的上傳,給用戶的只是一個(gè)假象。只所以要延時(shí)執(zhí)行TajaxFileUpload(),是因?yàn)樵诎褕D片上傳到服務(wù)器上時(shí),我在后臺給圖片重新命名了,命名的規(guī)則是,如下代碼:
代碼如下:
Random rd = new Random();
新聞熱點(diǎn)
疑難解答
圖片精選