快捷導(dǎo)航

jquery 批量上傳圖片實(shí)現(xiàn)代碼

更新時間：2010年01月28日 23:10:21 作者：

在網(wǎng)上一直找不到j(luò)query上傳圖片的例子,今天由于工作需要,在網(wǎng)上找了很長時間,找到了一個不太完整的例子,自已又對其進(jìn)行了修改,現(xiàn)在已經(jīng)可以使用,但只限于IE,火狐下不能使用,因?yàn)榛鸷碌貌坏奖镜厣蟼鞯膱D片路徑,希望能對新手有所幫助.

前臺: upload.htm

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>upload</title> 
<link href="upload.css" rel="Stylesheet" /> 
</head> 
<body> 
<form> 
<ul> 
<li> 
<button id="SubUpload" 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> 
</li> 
</ul> 
<ul id="loadimage"> 
<li> 
<div class="imagelabel"> 
圖片1:</div> 
<div class="imagepath"> 
<input name="" size="45" id="uploadImg1" type="file" /></div> 
<div class="loadinfo"> 
<span id="uploadImgState1"></span> 
</div> 
</li> 
</ul> 
</form> 
</body> 
</html> 
<script type="text/javascript" src="http://www.cnblogs.com/JS/jquery-1.3.2-vsdoc.js"></script> 
<script type="text/javascript"> 
var TfileUploadNum = 1; //記錄圖片選擇框個數(shù) 
var Tnum = 1; //ajax上傳圖片時索引 
//增加上傳按鈕 
function TAddFileUpload() { 
var idnum = TfileUploadNum + 1; 
var str = "<li>"; 
str += "<div class='imagelabel'>圖片" + idnum + ":</div>"; 
str += "<div class='imagepath'><input name='' size='45' id='uploadImg" + idnum + "' type='file' /></div>"; 
str += "<div class='loadinfo'><span id='uploadImgState" + idnum + "'></span></div>"; 
str += "</li>"; 
$("#loadimage").append(str); 
TfileUploadNum += 1; 
} 
//開始上傳 
function TSubmitUploadImageFile() { 
document.getElementById("SubUpload").disabled = true; 
document.getElementById("CancelUpload").disabled = true; 
document.getElementById("AddUpload").disabled = true; 
setTimeout("TajaxFileUpload()", 1000); //此為關(guān)鍵代碼 
} 
//Ajax上傳方法 
function TajaxFileUpload() { 
if (Tnum < TfileUploadNum + 1) { 
//準(zhǔn)備提交處理 
$("#uploadImgState" + Tnum).html("<img src='/gif/upfileloader.gif'/>"); 
//開始提交 
$.ajax({ 
type: "POST", 
url: "Handler.ashx", 
data: { upfile: $("#uploadImg" + Tnum).val()}, 
success: function(data, status) { 
var stringArray = data.split("|"); 
//stringArray[0]　　　 成功狀態(tài)(1為成功，0為失敗) 
//stringArray[1]　　　 上傳成功的文件名 
//stringArray[2]　　　 消息提示 
if (stringArray[0] == "1") { 
//上傳成功 
$("#uploadImgState" + Tnum).html("<img src='/gif/Success.gif' />" + stringArray[1] + "--" + stringArray[2]); 
} 
else { 
//上傳出錯 
$("#uploadImgState" + Tnum).html("<img src='/gif/Error.gif' />" + stringArray[1] + "--" + stringArray[2]); 
} 
Tnum++; 
setTimeout("TajaxFileUpload()", 1000); 
} 
}); 
} 
else { 
document.getElementById("SubUpload").disabled = false; 
document.getElementById("CancelUpload").disabled = false; 
document.getElementById("AddUpload").disabled = false; 
} 
}　　　　　　　　 
</script> 

處理程序Handler.ashx

復(fù)制代碼代碼如下:

 
<%@ WebHandler Language="C#" Class="Handler" %> 
using System; 
using System.Web; 
using System.IO; 
using System.Text; 
using System.Net; 
public class Handler : IHttpHandler 
{ 
public void ProcessRequest(HttpContext context) 
{ 
//源圖片路徑 
string _fileNamePath = ""; 
try 
{ 
_fileNamePath = context.Request.Form["upfile"]; 
string _savedFileResult = UpLoadFile(_fileNamePath); //開始上傳 
context.Response.Write(_savedFileResult);//返回上傳結(jié)果 
} 
catch 
{ 
context.Response.Write("0|error|文件路徑錯誤"); 
} 
} 
/// <summary> 
/// 保存圖片 
/// </summary> 
/// <param name="fileNamePath"></param> 
/// <returns></returns> 
private string UpLoadFile(string fileNamePath) 
{ 
//圖片格式 
string fileNameExt = fileNamePath.Substring(fileNamePath.IndexOf('.')).ToLower(); 
if (!CheckFileExt(fileNameExt)) return "0|error|圖片格式不正確!"; 
//保存路徑 
string toFilePath = "ProductUpload/"; 
//物理完整路徑 
string toFileFullPath = HttpContext.Current.Server.MapPath(toFilePath); 
//檢查是否有該路徑 沒有就創(chuàng)建 
if (!Directory.Exists(toFileFullPath)) 
{ 
Directory.CreateDirectory(toFileFullPath); 
} 
//生成將要保存的隨機(jī)文件名 
string toFileName = GetFileName(); 
//將要保存的完整路徑 
string saveFile=toFileFullPath +toFileName + fileNameExt; 
///創(chuàng)建WebClient實(shí)例 
WebClient myWebClient = new WebClient(); 
//設(shè)定windows網(wǎng)絡(luò)安全認(rèn)證 
myWebClient.Credentials = CredentialCache.DefaultCredentials; 
//要上傳的文件 
FileStream fs = new FileStream(fileNamePath, FileMode.Open, FileAccess.Read); 　　　　　 
BinaryReader r = new BinaryReader(fs); 
//使用UploadFile方法可以用下面的格式 
myWebClient.UploadFile(saveFile,fileNamePath); 
return "1|"+toFileName+fileNameExt+"|保存成功."; 
} 
/// <summary> 
/// 檢測圖片類型 
/// </summary> 
/// <param name="_fileExt"></param> 
/// <returns>正確返回True</returns> 
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; 
} 
/// <summary> 
/// 得到隨機(jī)圖片名 
/// </summary> 
/// <returns></returns> 
public static string GetFileName() 
{ 
Random rd = new Random(); 
StringBuilder serial = new StringBuilder(); 
serial.Append(DateTime.Now.ToString("yyMMddHHmmssff")); 
serial.Append(rd.Next(0, 9999).ToString()); 
return serial.ToString(); 
} 
public bool IsReusable 
{ 
get 
{ 
return false; 
} 
} 
} 

CSS樣式 upload.css

復(fù)制代碼代碼如下:

 
body{font-size: 12pt;} 
ul{list-style: none;} 
li{margin: 0px;} 
#loadimage{width: 860px;overflow: hidden;} 
.imagelabel{ float: left; width: 60px; height: 25px;} 
.imagepath{float: left; width: 400px; height: 25px; } 
.loadinfo{float: left; width: 400px;height: 25px;} 

您可能感興趣的文章: