JQuery+ajax實現批量上傳圖片(自寫)

來源:互聯網
上載者:User

在網上搜尋了一下,發現以jquery+ajax方式實現單張圖片上傳的代碼是有的,但實現批量上傳圖片的程式卻沒搜尋到,於是根據搜尋到的代碼,寫了一個可以批量上傳的。
先看

點擊增加按鈕,會增加一個選擇框,如:

選擇要上傳的圖片,如下:

上傳成功如:

下面來看代碼:
前台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>

因為用了JQuery,所以你完全可以把click事件放在js檔案中
“增加”按鈕js代碼:複製代碼 代碼如下:var TfileUploadNum=1; //記錄圖片選擇框個數
var Tnum=1; //ajax上傳圖片時索引
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);//此為關鍵代碼
}

關於setTimeout("TajaxFileUpload()",1000);這句代碼:因為所謂的批量上傳,其實還是一個一個的上傳,給使用者的只是一個假象。只所以要延時執行TajaxFileUpload(),是因為在把圖片上傳到伺服器上時,我在後台給圖片重新命名了,命名的規則是,如下代碼:複製代碼 代碼如下:Random rd = new Random();
StringBuilder serial = new StringBuilder();
serial.Append(DateTime.Now.ToString("yyyyMMddHHmmssff"));
serial.Append(rd.Next(0, 999999).ToString());
return serial.ToString();

即使我命名精確到毫秒,另外再加上隨機數,可是還是有上傳的第二張圖片把上傳的第一張圖片覆蓋的情況出現。所以此處我設定了延時1秒後在上傳下一張圖片。剛開始做這個東西的時候,用的是for迴圈,來把所有的圖片一個一個的迴圈地用ajax上傳,可是for迴圈速度太快了,可能第一張圖片還沒來得及ajax,第二張就被for過來了,還是有第二張覆蓋第一張的情況出現。
下面來看TajaxFileUpload()函數,代碼如下:複製代碼 代碼如下:function TajaxFileUpload()
{
if(Tnum<TfileUploadNum+1)
{
//準備提交處理
("#uploadImgState"+Tnum).html("<img src=../images/loading.gif />");
//開始提交
.ajax
({
type: "POST",
url:"http://localhost/ajaxText2/Handler1.ashx",
data:{upfile:("#uploadImg"+Tnum).val(),category:("#pcategory").val()},
success:function (data, status)
{
//alert(data);
var stringArray = data.split("|");

if(stringArray[0]=="1")
{
//stringArray[0] 成功狀態(1為成功,0為失敗)
//stringArray[1] 上傳成功的檔案名稱
//stringArray[2] 訊息提示
("#uploadImgState"+Tnum).html("<img src=../images/note_ok.gif />");//+stringArray[1]+"|"+stringArray[2]);
}
else
{
//上傳出錯
("#uploadImgState"+Tnum).html("<img src=../images/note_error.gif />"+stringArray[2]);//+stringArray[2]+"");
}
Tnum++;
setTimeout("TSubmitUploadImageFile()",0);
}
});
}
}

上面的代碼沒什麼可說的,很容易看懂。下面來看Handler1.ashx(一般處理常式)如何來處理post過來的圖片的(此代碼來自網上,具體地址忘記了),下面只給出關鍵代碼,全部代碼在附件裡。
1、複製代碼 代碼如下:string _fileNamePath = "";
try
{
_fileNamePath = context.Request.Form["upfile"];
//開始上傳
string _savedFileResult = UpLoadFile(_fileNamePath);
context.Response.Write(_savedFileResult);
}
catch
{
context.Response.Write("0|error|上傳提交出錯");
}

2、複製代碼 代碼如下://產生將要儲存的隨機檔案名稱
string fileName = GetFileName() + fileNameExt;
//物理完整路徑
string toFileFullPath = HttpContext.Current.Server.MapPath(toFilePath);
//檢查是否有該路徑 沒有就建立
if (!Directory.Exists(toFileFullPath))
{
Directory.CreateDirectory(toFileFullPath);
}
///建立WebClient執行個體
WebClient myWebClient = new WebClient();
//設定windows網路安全認證 方法1
myWebClient.Credentials = CredentialCache.DefaultCredentials;
//要上傳的檔案
FileStream fs = new FileStream(fileNamePath, FileMode.Open, FileAccess.Read);
//FileStream fs = OpenFile();
BinaryReader r = new BinaryReader(fs);
//使用UploadFile方法可以用下面的格式
//myWebClient.UploadFile(toFile, "PUT",fileNamePath);
byte[] postArray = r.ReadBytes((int)fs.Length);
Stream postStream = myWebClient.OpenWrite(toFile, "PUT");
if (postStream.CanWrite)
{
postStream.Write(postArray, 0, postArray.Length);
}

3、檢查是否合法的上傳檔案複製代碼 代碼如下:private bool CheckFileExt(string _fileExt)
{
string[] allowExt = new string[] { ".gif", ".jpg", ".jpeg" };
for (int i = 0; i < allowExt.Length; i++)
{
if (allowExt[i] == _fileExt) { return true; }
}
return false;
}

4、產生要儲存的隨即檔案名稱 複製代碼 代碼如下:public static string GetFileName()
{
Random rd = new Random();
StringBuilder serial = new StringBuilder();
serial.Append(DateTime.Now.ToString("yyyyMMddHHmmssff"));
serial.Append(rd.Next(0, 999999).ToString());
return serial.ToString();
}

Ok,基本上這個批量上傳圖片的JQuery+ajax方式實現的程式完成了。如果你要上傳word文檔,pdf檔案,只要稍作修改,就可以實現了。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.