Comment Fileupload d'Ajax implémente-t-il plusieurs téléchargements de fichiers ?

Cette fois, je vais vous montrer comment implémenter plusieurs téléchargements de fichiers avec Fileupload d'Ajax, et quelles sont les précautions pour que Fileupload d'Ajax implémente plusieurs téléchargements de fichiers. Ce qui suit est un exemple pratique. cas. Jetons un coup d'oeil une fois.

Ouvrez Google et recherchez « ajaxFileupload » « téléchargement de fichiers multiples ». Vous pouvez en trouver de nombreux similaires, alors pourquoi devrais-je écrire à ce sujet ?
La première est d'exprimer ma gratitude pour la contribution des maîtres précédents ; la seconde est un résumé de mes propres connaissances ; la troisième est que j'ai apporté des modifications basées sur celles d'origine, je les enregistre ici et je peux aider d'autres amis.

Tous ceux qui ont utilisé ce plugin connaissent l'utilisation de base de ce plugin. Je ne dirai pas de bêtises et passerai directement au code.

Je dois implémenter plusieurs téléchargements de fichiers. La méthode précédente consistait à définir plusieurs entrées avec des ID différents, puis à mettre la méthode ajaxfileuplod dans la boucle for. je ne pense pas que ce soit très bon, mais je l'ai trouvé plus tard sur Internet, qui est plus avancé, et j'ai directement changé le code source (car l'auteur ne l'a pas mis à jour depuis longtemps, et il ne peut vraiment pas répondre les exigences). Voyons ensuite comment je l'ai modifié.

Citation de la pratique en ligne :

1. Regardez le code avant modification

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

Il est facile de voir qu'il s'agit d'ajouter l'entrée de l'identifiant. à from. Go, puis pour implémenter plusieurs téléchargements de fichiers, modifiez-le comme suit :

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

Après ce changement, le code d'initialisation sera écrit comme ceci :

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

Ici , Il est en effet possible de télécharger plusieurs fichiers, mais pour moi, un nouveau problème se pose. Les fichiers dans mon interface ne sont pas corrigés, mais chargés dynamiquement. Les identifiants doivent donc être générés dynamiquement. . Pourquoi ne pas simplement prendre le nom de Drap de laine ? Modifiez ensuite le code ci-dessus comme suit :

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

Si vous le modifiez comme ceci, vous pouvez télécharger plusieurs groupes de fichiers. Voyons comment je l'applique.

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

J'utilise struts2 en arrière-plan Le téléchargement de strtus2 est relativement simple, il suffit de déclarer le nom convenu. est L'objet et le nom du fichier peuvent être obtenus. Le code est le suivant :

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

En écrivant ceci, j'ai une question : pourquoi le maître a-t-il modifié plusieurs fichiers auparavant et a-t-il quand même obtenu l'ID, et comment l'a-t-il fait. il l'obtient en arrière-plan ? Je ne le comprends toujours pas bien. Le code que j'ai modifié est-il réalisable ? Y a-t-il un bug ? Cela n'a pas encore été testé. Si vous rencontrez des problèmes, veuillez les signaler et apprendre ensemble

Enfin, vous trouverez ci-joint mon plug-in modifié

plug-in ajaxfileupload

Je pense que vous lirez le cas dans cet article. Vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Ajax+Servlet pour implémenter un lien déroulant sans actualisation (avec code)

Comment pour utiliser Ajax de manière asynchrone Vérifiez si le nom d'utilisateur est dupliqué

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!