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

이번에는 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  src="/static/imghwm/default1.png" data-src="scripts/ajaxFileUploader/loading.gif" class="lazy" alt="ajax의 Fileupload는 어떻게 다중 파일 업로드를 구현합니까?" > 
    
     </p>

                                                                                                                                                                                      

多组多个文件
第一组	第二组
Upload	添加一组

     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></td> "+ 
  "<td><input></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>  여기에 질문이 있습니다. 이전에 마스터가 여러 파일을 변경했는데도 여전히 ID를 가져오는 이유는 무엇입니까? 그리고 내가 변경한 코드가 여전히 가능합니까? 버그가 있나요? 아직 테스트되지 않은 문제가 있으면 지적하고 함께 배워보세요. <p style="text-align: left;"></p>마지막으로 제가 수정한 플러그인이 첨부되어 있습니다<p style="text-align: left;"></p>ajaxfileupload 플러그인<p></p>을 읽으신 후 방법을 익히셨을 것입니다. 이 기사의 경우 더 흥미로운 내용을 보려면 온라인에서 PHP 중국어 관련 기사를 주목하세요! <p></p>추천 자료: <p><a href="http://www.php.cn/js-tutorial-390903.html" target="_blank"></a>새로 고침이 없는 드롭다운 링크를 구현하는 Ajax+Servlet(코드 포함) <br></p>
<p><a href="http://www.php.cn/js-tutorial-390902.html" target="_blank"></a>Ajax를 사용하여 사용자 이름이 중복되는지 비동기적으로 확인하는 방법<br></p>🎜</griddocfilename.length>

위 내용은 ajax의 Fileupload는 어떻게 다중 파일 업로드를 구현합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!