집 >웹 프론트엔드 >JS 튜토리얼 >ajax의 Fileupload는 어떻게 다중 파일 업로드를 구현합니까?

ajax의 Fileupload는 어떻게 다중 파일 업로드를 구현합니까?

php中世界最好的语言원래의: 2018-03-30 17:02:541479검색

이번에는 ajax의 Fileupload를 사용하여 다중 파일 업로드를 구현하는 방법과 ajax의 Fileupload를 사용하여 다중 파일 업로드를 구현하는 데 필요한 주의 사항

은 무엇인지 보여 드리겠습니다. 다음은 실제 사례입니다. 살펴보겠습니다.

구글을 열고 "ajaxFileupload" '다중 파일 업로드'를 검색해 보세요. 비슷한 것들이 많이 있는데, 제가 왜 글을 써야 할까요?

첫 번째는 이전의 위대한 스승들에게 감사를 표하는 것이고, 두 번째는 내가 알고 있는 지식을 요약한 것이고, 세 번째는 내가 여기에 기록하고 다른 친구들에게 도움이 될 수 있다는 것입니다.

이 플러그인을 사용해본 사람이라면 누구나 이 플러그인의 기본 사용법을 알고 있을 것입니다. 헛소리는 하지 않고 바로 코드로 넘어가겠습니다.

다중 파일 업로드를 구현해야 합니다. 이전 방법은 서로 다른 ID로 여러 입력을 정의한 다음 for 루프

에 이 방법을 넣는 것이었습니다. 아주 좋습니다. 다음으로 인터넷에서 더 발전된 것을 발견하고 소스 코드를 직접 변경했습니다(작성자가 오랫동안 업데이트하지 않았고 실제로 요구 사항을 충족할 수 없기 때문입니다). 다음으로 어떻게 변경했는지 살펴보겠습니다.

온라인 실습 인용:

1. 수정 전 코드를 살펴보세요

var oldElement = jQuery('#' + fileElementId); 
var newElement = jQuery(oldElement).clone(); 
jQuery(oldElement).attr('id', fileId); 
jQuery(oldElement).before(newElement); 
jQuery(oldElement).appendTo(form);

from에 ID 입력을 추가한 다음 여러 파일을 업로드하려면 다음과 같이 변경하세요.

if(typeof(fileElementId) == 'string'){ 
 fileElementId = [fileElementId]; 
} 
for(var i in fileElementId){ 
 var oldElement = jQuery('#' + fileElementId[i]); 
 var newElement = jQuery(oldElement).clone(); 
 jQuery(oldElement).attr('id', fileId); 
 jQuery(oldElement).before(newElement); 
 jQuery(oldElement).appendTo(form); 
}

이 변경 후 초기화 코드는 다음과 같이 작성됩니다.

$.ajaxFileUpload({ 
 url:'/ajax.php', 
 fileElementId:['id1','id2']//原先是fileElementId:'id' 只能上传一个 
});

이 시점에서는 실제로 여러 파일을 업로드하는 것이 가능하지만 저에게는 새로운 문제가 발생합니다. 내 인터페이스는 고정되어 있지 않고 동적으로 로드되므로 ID를 동적으로 생성해야 하는 것이 너무 번거로운 것 같습니다. 그런 다음 위 코드를 다음과 같이 변경합니다.

if(typeof(fileElementId) == 'string'){ 
   fileElementId = [fileElementId]; 
  } 
  for(var i in fileElementId){ 
   //按name取值 
   var oldElement = jQuery("input[name="+fileElementId[i]+"]"); 
   oldElement.each(function() { 
    var newElement = jQuery($(this)).clone(); 
    jQuery(oldElement).attr('id', fileId); 
    jQuery(oldElement).before(newElement); 
    jQuery(oldElement).appendTo(form); 
   }); 
  }

이렇게 변경하면 여러 그룹의 파일을 업로드할 수 있습니다. 다음으로 적용 방법을 살펴보겠습니다.

html:

<p> 
    <img id="loading" src="scripts/ajaxFileUploader/loading.gif" style="display:none;"> 
    
     <table cellpadding="0" cellspacing="0" class="tableForm" id="calculation_model"> 
      <thead> 
      <tr> 
       <th>多组多个文件</th> 
      </tr> 
      </thead> 
      <tbody> 
      <tr> 
       <td>第一组</td> 
       <td>第二组</td> 
      </tr> 
      <tr> 
       <td><input type="file" name="gridDoc" class="input"></td> 
       <td><input type="file" name="caseDoc" class="input"></td> 
      </tr> 
      </tbody> 
      <tfoot> 
      <tr> 
       <td><button class="button" id="up1">Upload</button></td> 
       <td><button class="button" id="addInput" >添加一组</button></td> 
      </tr> 
      </tfoot> 
     </table> 
   </p>

js:

/** 
 * Created with IntelliJ IDEA. 
 * User: Administrator 
 * Date: 13-7-3 
 * Time: 上午9:20 
 * To change this template use File | Settings | File Templates. 
 */ 
$(document).ready(function () { 
 $("#up1").click(function(){ 
  var temp = ["gridDoc","caseDoc"]; 
  ajaxFileUpload(temp); 
 }); 
 
 $("#addInput").click(function(){ 
  addInputFile(); 
 }); 
 
}); 
 
//动态添加一组文件 
function addInputFile(){ 
 $("#calculation_model").append(" <tr>"+ 
  "<td><input type=&#39;file&#39; name=&#39;gridDoc&#39; class=&#39;input&#39;></td> "+ 
  "<td><input type=&#39;file&#39; name=&#39;caseDoc&#39; class=&#39;input&#39;></td> "+ 
  "</tr>"); 
} 
 
 
//直接使用下载下来的文件里的demo代码 
function ajaxFileUpload(id) 
{ 
 //starting setting some animation when the ajax starts and completes 
 $("#loading").ajaxStart(function(){ 
   $(this).show(); 
  }).ajaxComplete(function(){ 
   $(this).hide(); 
  }); 
 
 /* 
  prepareing ajax file upload 
  url: the url of script file handling the uploaded files 
  fileElementId: the file type of input element id and it will be the index of $_FILES Array() 
  dataType: it support json, xml 
  secureuri:use secure protocol 
  success: call back function when the ajax complete 
  error: callback function when the ajax failed 
 
  */ 
 $.ajaxFileUpload({ 
   url:'upload.action', 
   //secureuri:false, 
   fileElementId:id, 
   dataType: 'json' 
  } 
 ) 
 
 return false; 
 
}

저는 struts2를 백그라운드로 사용합니다. strtus2의 업로드는 비교적 간단합니다. 합의된 이름만 선언하면 파일 객체와 이름을 얻을 수 있습니다.

package com.ssy.action; 
 
import com.opensymphony.xwork2.ActionSupport; 
import org.apache.commons.io.FileUtils; 
import org.apache.struts2.util.ServletContextAware; 
 
import javax.servlet.ServletContext; 
import java.io.*; 
import java.text.SimpleDateFormat; 
import java.util.Date; 
import java.util.Random; 
 
/** 
 * Created with IntelliJ IDEA. 
 * User: Administrator 
 * Date: 13-7-2 
 * Time: 下午4:08 
 * To change this template use File | Settings | File Templates. 
 */ 
public class Fileupload extends ActionSupport implements ServletContextAware { 
 private File[] gridDoc,caseDoc; 
 private String[] gridDocFileName,caseDocFileName; 
 
 private ServletContext context; 
 
  
 
 public String execute(){ 
  for (int i = 0;i<gridDocFileName.length;i++) { 
   System.out.println(gridDocFileName[i]); 
  } 
  for (int i = 0;i<caseDocFileName.length;i++) { 
   System.out.println(caseDocFileName[i]); 
  } 
 
 
  //System.out.println(doc1FileName); 
  //System.out.println(doc2FileName); 
  String targetDirectory = context.getRealPath("/uploadFile"); 
 
  /* 
   *这里我只取得 第一组的文件进行上传，第二组的类似 
  */ 
 try{ 
   for (int i = 0; i < gridDoc.length; i++) { 
    String targetFileName = generateFileName(gridDocFileName[i]); 
    File target = new File(targetDirectory, targetFileName); 
    FileUtils.copyFile(gridDoc[i], target); 
   } 
  }catch (Exception e){ 
   e.printStackTrace(); 
  }  
 
  return SUCCESS; 
 } 
 
 public File[] getGridDoc() { 
  return gridDoc; 
 } 
 
 public void setGridDoc(File[] gridDoc) { 
  this.gridDoc = gridDoc; 
 } 
 
 public File[] getCaseDoc() { 
  return caseDoc; 
 } 
 
 public void setCaseDoc(File[] caseDoc) { 
  this.caseDoc = caseDoc; 
 } 
 
 public String[] getGridDocFileName() { 
  return gridDocFileName; 
 } 
 
 public void setGridDocFileName(String[] gridDocFileName) { 
  this.gridDocFileName = gridDocFileName; 
 } 
 
 public String[] getCaseDocFileName() { 
  return caseDocFileName; 
 } 
 
 public void setCaseDocFileName(String[] caseDocFileName) { 
  this.caseDocFileName = caseDocFileName; 
 } 
 
 /** 
  * 用日期和随机数格式化文件名避免冲突 
  * @param fileName 
  * @return 
  */ 
 private String generateFileName(String fileName) { 
  System.out.println(fileName); 
  SimpleDateFormat sf = new SimpleDateFormat("yyMMddHHmmss"); 
  String formatDate = sf.format(new Date()); 
  int random = new Random().nextInt(10000); 
  int position = fileName.lastIndexOf("."); 
  String extension = fileName.substring(position); 
  return formatDate + random + extension; 
 } 
 
}

여기에 질문이 있습니다. 이전에 마스터가 여러 파일을 변경했는데도 여전히 ID를 가져오는 이유는 무엇입니까? 그리고 내가 변경한 코드가 여전히 가능합니까? 버그가 있나요? 아직 테스트되지 않은 문제가 있으면 지적하고 함께 배워보세요.

마지막으로 제가 수정한 플러그인이 첨부되어 있습니다

ajaxfileupload 플러그인

을 읽으신 후 방법을 익히셨을 것입니다. 이 기사의 경우 더 흥미로운 내용을 보려면 온라인에서 PHP 중국어 관련 기사를 주목하세요!