Heim > Artikel > Web-Frontend > So fügen Sie mit AjaxFileUpload dynamisch eine Datei-Upload-Box hinzu

So fügen Sie mit AjaxFileUpload dynamisch eine Datei-Upload-Box hinzu

php中世界最好的语言Original: 2018-03-31 09:33:411772Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie mit AjaxFileUpload dynamisch eine Datei-Upload-Box hinzufügen Fall. Schauen wir uns das einmal an. Aber es gibt nur eine feste Anzahl von Dateien. Wenn die Nachfrage nicht sicher ist, wie viele Dateien vorhanden sind, müssen wir dynamisch eine Datei-Upload-Box hinzufügen, um Flexibilität zu erreichen.

Basierend auf dem Grundgerüst des vorherigen Artikels bleibt das Grundgerüst unverändert. Die folgenden Aspekte werden hauptsächlich geändert:

1 Datei-Upload-Boxen

2. Holen Sie sich die ID der Datei-Upload-Box

3. Konvertieren Sie das ID-Array in das erforderliche Objekt-Array in ajaxfileupload.js

Lösen Sie die oben genannten Probleme nacheinander

1. Dynamisches Hinzufügen und Löschen von Datei-Upload-Boxen implementieren

<body> 
 <form action="" enctype="multipart/form-data"> 
 <h2> 
  多文件上传 
 </h2> 
 <input type="file" id="file1" name="file" /><a id="add" href="javascript:void();" rel="external nofollow" onclick="addFile();">添加</a> 
 <span> 
  <table id="down"> 
  </table> 
 </span> 
 </br> 
 <input type="button" onclick="fileUpload();" value="上传"> 
 </form> 
</body>

<script type="text/javascript"> 
 //添加附件 
 function addFile(){ 
 var fileLength = $("input[name=file]").length+1; 
 var inputFile = "<p id=&#39;addFile"+fileLength+"&#39;><input type=&#39;file&#39; id=&#39;file"+fileLength+"&#39; name=&#39;file&#39; />" 
   +"<a href=&#39;javascript:void();&#39; onclick=&#39;delFile("+fileLength+");&#39;>删除</a></p>"; 
 $("#add").after(inputFile); 
 } 
 //删除附件 
 function delFile(id){ 
 $("#addFile"+id).remove(); 
 } 
</script>

2 . Holen Sie sich die ID der Datei-Upload-BoxDa wir nicht wissen, wie viele Upload-Boxen es gibt, wird das ID-Attribut jedes Mal erhöht, wenn wir eine Upload-Box hinzufügen Form von Datei1 und Datei2

Sie können jede Schleife verwenden, um Zeichen zu verbinden

Dann erhalten wir den Dateiwert wie:

var files = ""; 
//获取所有 <input type="file" id="file1" name="file" /> 的ID属性值 
$("input[name=file]").each(function(){ 
 files = files + $(this).attr("id")+","; 
}) 
//将字符最后一逗号(,)截取掉 
files = files.substring(0,files.length-1);

var files = "file1,file2,file3";Sie können um die Dateien als String-Typ anzuzeigen

console.info(typeof(files));

3. Ajaxfileupload.js wird Das ID-Array wird in das erforderliche Objektarray konvertiert

weil Wir brauchen so etwas wie

anstelle von var files = ['file1','file2','file3'];

, also müssen wir es konvertieren. Tatsächlich ist es nicht notwendig, den Vorgang in ajaxfileupload.js var files = "file1,file2,file3"; Sie können es beim Abrufen der ID konvertieren und dann den Wert übergeben. Es spielt keine Rolle, wo es ist, die Methode ist die gleiche.

Finden Sie immer noch den folgenden Code:

Fügen Sie Folgendes zu diesem Code hinzu:

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

Der Effekt ist wie gezeigt:

var t = ''; 
if(typeof(fileElementId) == 'string'){ 
/* 
 * 将传过来的值 如："file1,file2,file3" 转换为：['file1','file2','file3'] 
 */ 
var s = fileElementId.split(","); 
for(var i in s){ 
 t = t + "'"+s[i]+"'"+","; 
} 
t = "["+t+"]"; 
t = t.replace(",]", "]") 
} 
fileElementId= eval('('+ t +')'); //将string类型转换为Object类型

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

Empfohlene Lektüre:

Eine praktische Zusammenfassung von Ajax und JSONP im Projekt

So verwenden Sie AjaxFileUpload, um mehrere zu implementieren Datei-Uploads

Das obige ist der detaillierte Inhalt vonSo fügen Sie mit AjaxFileUpload dynamisch eine Datei-Upload-Box hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verwenden Sie AjaxFileUpload zum Hochladen mehrerer DateienNächster Artikel：So verwenden Sie AjaxFileUpload zum Hochladen mehrerer Dateien

In Verbindung stehende Artikel

Mehr sehen