JQuery+ajax 대량 업로드 이미지 구현(자체 작성)

인터넷 에서 검색 해 보 니 jquery+ajax 방식 으로 한 장의 사진 을 업로드 하 는 코드 가 있 었 으 나 대량으로 사진 을 업로드 하 는 프로그램 은 검색 되 지 않 아 검색 한 코드 에 따라 대량으로 업로드 할 수 있 는 것 을 썼 다.효과 도 를 먼저 보다

추가 단 추 를 누 르 면 선택 상자 가 추 가 됩 니 다.다음 그림:

업로드 할 그림 을 선택 하 십시오.효과 그림 은 다음 과 같 습 니 다.

다음 그림 과 같이 업로드 성공:


다음은 코드 를 보 겠 습 니 다:프론트 데스크 톱 html 주요 코드:

<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> 

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("Tajax FileUpload()",1000);이 코드:대량 업로드 라 는 것 은 하나의 업로드 이기 때문에 사용자 에 게 주 는 것 은 가상 일 뿐 입 니 다.그래서 Tajax FileUpload()를 지연 시 키 려 고 하 는 이 유 는 서버 에 그림 을 올 렸 을 때 제 가 배경 에서 그림 의 이름 을 바 꾸 었 기 때 문 입 니 다.이름 을 짓 는 규칙 은 다음 과 같은 코드 입 니 다

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 에 의 해 왔 을 수도 있 고 두 번 째 사진 이 첫 번 째 장 을 덮 는 상황 이 나 타 났 습 니 다.다음은 Tajax FileUpload()함수 입 니 다.코드 는 다음 과 같 습 니 다

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); 
} 
}); 
} 
} 

위의 코드 는 할 말 이 없어 서 쉽게 알 아 볼 수 있 습 니 다.다음은 Handler 1.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 방식 으로 이 루어 지 는 프로그램 이 완료 되 었 습 니 다.워드 문 서 를 업로드 하려 면 pdf 파일 을 조금 만 수정 하면 됩 니 다.