在網(wǎng)上搜索了一下，發(fā)現(xiàn)以jquery+ajax方式實(shí)現(xiàn)單張圖片上傳的代碼是有的，但實(shí)現(xiàn)批量上傳圖片的程序卻沒(méi)搜索到，于是根據(jù)搜索到的代碼，寫(xiě)了一個(gè)可以批量上傳的。
先看效果圖
點(diǎn)擊增加按鈕，會(huì)增加一個(gè)選擇框，如下圖：
選擇要上傳的圖片，效果圖如下：
上傳成功如下圖：
下面來(lái)看代碼：
前臺(tái)html主要代碼：
復(fù)制代碼 代碼如下:
button id="SubUpload" class="ManagerButton" onClick="TSubmitUploadImageFile();return false;">確定上傳/button>nbsp;nbsp;
button id="CancelUpload" class="ManagerButton" onClick="javascript：history.go(-1);">取消/button>nbsp;nbsp;
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代碼：
復(fù)制代碼 代碼如下:
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代碼：
復(fù)制代碼 代碼如下:
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è)的上傳，給用戶(hù)的只是一個(gè)假象。只所以要延時(shí)執(zhí)行TajaxFileUpload()，是因?yàn)樵诎褕D片上傳到服務(wù)器上時(shí)，我在后臺(tái)給圖片重新命名了，命名的規(guī)則是，如下代碼：
復(fù)制代碼 代碼如下:
Random rd = new Random();
StringBuilder serial = new StringBuilder();
serial.Append(DateTime.Now.ToString("yyyyMMddHHmmssff"));
serial.Append(rd.Next(0, 999999).ToString());
return serial.ToString();
即使我命名精確到毫秒，另外再加上隨機(jī)數(shù)，可是還是有上傳的第二張圖片把上傳的第一張圖片覆蓋的情況出現(xiàn)。所以此處我設(shè)置了延時(shí)1秒后在上傳下一張圖片。剛開(kāi)始做這個(gè)東西的時(shí)候，用的是for循環(huán)，來(lái)把所有的圖片一個(gè)一個(gè)的循環(huán)地用ajax上傳，可是for循環(huán)速度太快了，可能第一張圖片還沒(méi)來(lái)得及ajax，第二張就被for過(guò)來(lái)了，還是有第二張覆蓋第一張的情況出現(xiàn)。
下面來(lái)看TajaxFileUpload()函數(shù)，代碼如下：
復(fù)制代碼 代碼如下:
function TajaxFileUpload()
{
if(TnumTfileUploadNum+1)
{
//準(zhǔn)備提交處理
("#uploadImgState"+Tnum).html("img src=../images/loading.gif />");
//開(kāi)始提交
.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] 成功狀態(tài)(1為成功，0為失敗)
//stringArray[1] 上傳成功的文件名
//stringArray[2] 消息提示
("#uploadImgState"+Tnum).html("img src=../images/note_ok.gif />");//+stringArray[1]+"|"+stringArray[2]);
}
else
{
//上傳出錯(cuò)
("#uploadImgState"+Tnum).html("img src=../images/note_error.gif />"+stringArray[2]);//+stringArray[2]+"");
}
Tnum++;
setTimeout("TSubmitUploadImageFile()",0);
}
});
}
}
上面的代碼沒(méi)什么可說(shuō)的，很容易看懂。下面來(lái)看Handler1.ashx(一般處理程序)如何來(lái)處理post過(guò)來(lái)的圖片的(此代碼來(lái)自網(wǎng)上，具體地址忘記了)，下面只給出關(guān)鍵代碼，全部代碼在附件里。
1、
復(fù)制代碼 代碼如下:
string _fileNamePath = "";
try
{
_fileNamePath = context.Request.Form["upfile"];
//開(kāi)始上傳
string _savedFileResult = UpLoadFile(_fileNamePath);
context.Response.Write(_savedFileResult);
}
catch
{
context.Response.Write("0|error|上傳提交出錯(cuò)");
}
2、
復(fù)制代碼 代碼如下:
//生成將要保存的隨機(jī)文件名
string fileName = GetFileName() + fileNameExt;
//物理完整路徑
string toFileFullPath = HttpContext.Current.Server.MapPath(toFilePath);
//檢查是否有該路徑 沒(méi)有就創(chuàng)建
if (!Directory.Exists(toFileFullPath))
{
Directory.CreateDirectory(toFileFullPath);
}
///創(chuàng)建WebClient實(shí)例
WebClient myWebClient = new WebClient();
//設(shè)定windows網(wǎng)絡(luò)安全認(rèn)證 方法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、檢查是否合法的上傳文件
復(fù)制代碼 代碼如下:
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、生成要保存的隨即文件名
復(fù)制代碼 代碼如下:
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，基本上這個(gè)批量上傳圖片的JQuery+ajax方式實(shí)現(xiàn)的程序完成了。如果你要上傳word文檔，pdf文件，只要稍作修改，就可以實(shí)現(xiàn)了。
您可能感興趣的文章:- Jquery ajaxsubmit上傳圖片實(shí)現(xiàn)代碼
- 基于jquery實(shí)現(xiàn)的上傳圖片及圖片大小驗(yàn)證、圖片預(yù)覽效果代碼
- jquery的ajaxSubmit()異步上傳圖片并保存表單數(shù)據(jù)演示代碼
- jquery 批量上傳圖片實(shí)現(xiàn)代碼
- 使用jQuery實(shí)現(xiàn)驗(yàn)證上傳圖片的格式與大小
- 簡(jiǎn)單實(shí)現(xiàn)jQuery上傳圖片顯示預(yù)覽功能
- jQuery AjaxUpload 上傳圖片代碼
- jQuery實(shí)現(xiàn)上傳圖片前預(yù)覽效果功能
- 基于Jquery插件Uploadify實(shí)現(xiàn)實(shí)時(shí)顯示進(jìn)度條上傳圖片
- jquery實(shí)現(xiàn)上傳圖片功能
