Wie implementiert Fileupload von Ajax mehrere Datei-Uploads?

Dieses Mal zeige ich Ihnen, wie Sie mehrere Datei-Uploads mit Ajax's Fileupload implementieren und welche Vorsichtsmaßnahmen es für Ajax's Fileupload gibt, um mehrere Datei-Uploads zu implementieren. Das Folgende ist eine praktische Anleitung Fall. Schauen wir uns das einmal an.

Öffnen Sie Google und suchen Sie nach „ajaxFileupload“, „mehrere Datei-Uploads“. Sie können viele ähnliche finden, warum sollte ich also darüber schreiben?
Zum einen möchte ich mich für den Beitrag der vorherigen Meister bedanken; zum anderen möchte ich mein eigenes Wissen zusammenfassen; das dritte ist, dass ich diese Änderungen hier aufzeichne und anderen Freunden helfen kann.

Jeder, der dieses Plug-in verwendet hat, kennt die grundlegende Verwendung dieses Plug-ins. Ich werde keinen Unsinn reden und direkt zum Code gehen.

Ich muss mehrere Datei-Uploads implementieren, indem ich mehrere Eingaben mit unterschiedlichen IDs definiere und dann die Ajaxfileuplod-Methode in die for-Schleife einfüge Ich denke nicht, dass es sehr gut ist, aber ich habe es später im Internet gefunden, das fortgeschrittener ist, und ich habe den Quellcode direkt geändert (weil der Autor ihn schon lange nicht mehr aktualisiert hat und er wirklich nicht erfüllt werden kann). die Anforderungen). Als nächstes wollen wir sehen, wie ich es geändert habe.

Zitat aus der Online-Praxis:

1. Schauen Sie sich den Code vor der Änderung an

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

Es ist leicht zu erkennen, dass hier die Eingabe der ID hinzugefügt werden soll Um mehrere Datei-Uploads zu implementieren, ändern Sie es wie folgt:

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

Nach dieser Änderung wird der Initialisierungscode wie folgt geschrieben:

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

Hier Es ist zwar möglich, mehrere Dateien hochzuladen, aber für mich entsteht ein neues Problem. Die Dateien in meiner Schnittstelle sind nicht fest, sondern müssen dynamisch generiert werden . Warum nicht einfach den Namen Wolltuch nehmen? Ändern Sie dann den obigen Code wie folgt:

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

Wenn Sie ihn so ändern, können Sie mehrere Gruppen von Dateien hochladen. Mal sehen, wie ich ihn anwende.

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

Das Hochladen von strtus2 ist relativ einfach ist Das Dateiobjekt und der Name können wie folgt abgerufen werden:

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

Während ich dies schreibe, habe ich eine Frage: Warum hat der Master zuvor mehrere Dateien geändert und trotzdem die ID erhalten? Es wird im Hintergrund angezeigt. Ich verstehe es immer noch nicht. Ist der Code, den ich geändert habe, machbar? Gibt es einen Fehler? Dies muss noch getestet werden. Wenn Sie Probleme sehen, weisen Sie sie bitte darauf hin und lernen Sie gemeinsam

Im Anhang finden Sie schließlich mein geändertes Plug-in

ajaxfileupload-Plugin

Ich glaube, Sie werden den Fall in diesem Artikel lesen. Sie beherrschen die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Ajax+Servlet zur Implementierung einer aktualisierungsfreien Dropdown-Verknüpfung (mit Code)

Wie Um Ajax asynchron zu verwenden, prüfen Sie, ob der Benutzername doppelt vorhanden ist

Das obige ist der detaillierte Inhalt vonWie implementiert Fileupload von Ajax mehrere Datei-Uploads?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!