2017-11-26 4 views
0

Ich möchte mehrere Datei hochladen. Ich habe viel versucht, aber ich bin nicht in der Lage, die Lösung zu finden. Wenn ich mehrere Bilder hochlade, wird nur der erste Bildwert verwendet.Mehrere Datei-Upload funktioniert nicht mit jQuery und Ajax und PHP

formData.append('file[]', $('input[type=file]')[0].files[0]); 

ich so versuche ich einzelnes Bild

formData.append('file[]', $('input[type=file]')[1].files[1]); 

Ich versuche, wie dieses Ich Störung erhalte ich immer

Uncaught TypeError: Cannot read property 'files' of undefined

$("#basicFormBtn").click(function(e){ 
 
    e.preventDefault(); 
 
    var formData = new FormData(); 
 
    var formData = new FormData($('#basicForm')[0]); 
 
    formData.append('file[]', $('input[type=file]')[0].files[0]); 
 
    $.ajax({ 
 
     type:'POST', 
 
     url :"test_session.php", 
 
     data: formData, 
 
     cache: false, 
 
     contentType: false, 
 
     processData: false, 
 
     success: function(data) { 
 
      console.log(data); 
 
     }, 
 
     error:function(exception){ 
 
      alert('Exeption:'+exception); 
 
     } 
 
    }); 
 
});
<head> 
 
<title>Bootstrap Example</title> 
 
<meta charset="utf-8"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 
    <div class="container"> 
 
     <h2>Basic Form</h2> 
 
     <form id="basicForm"> 
 
      <div class="row"> 
 
       <div class="col-md-5 form-group"> 
 
        <label for="name">User Name:</label> 
 
        <input type="text" class="form-control" id="userName" placeholder="Enter userName" name="userName" required=""> 
 
       </div> 
 
      </div> 
 
    
 
      <div class="row"> 
 
       <div class="col-md-5 form-group"> 
 
        <label for="album">Album:</label> 
 
        <input type="file" name="file" required="" multiple> 
 
       </div> 
 
      </div> 
 
      <input type="submit" name="submit" value="submit" class="btn btn-info" id="basicFormBtn"> 
 
     </form> 
 
    </div> 
 

 
</body> 
 
</html>

Ich erhalte die Ausgabe (in test_session.php) mit print_r($_FILES);

Array 
(
    [file] => Array 
     (
      [name] => Array 
       (
        [0] => 1.png 
       ) 

      [type] => Array 
       (
        [0] => image/png 
       ) 

      [tmp_name] => Array 
       (
        [0] => C:\xampp5.6\tmp\phpC3C0.tmp 
       ) 

      [error] => Array 
       (
        [0] => 0 
       ) 

      [size] => Array 
       (
        [0] => 166275 
       ) 

     ) 

    ) 
+0

Sie müssen jedes Bild mit einer Schleifenfunktion anhängen, wie 'for' oder' for each' – Pedram

+0

Sie müssen nichts anhängen, wenn es bereits in der Form ist und alle Dateien bereits im Formularobjekt sind. Befreien Sie sich von den angehängten Dateien – charlietfl

Antwort

2

dieses Probieren Sie alle hochgeladenen Dateien erhalten.

Ihre alten Code

<input type="file" name="file" required="" multiple> 

Wechsel mit diesem

<input type="file" name="file[]" required="" multiple> 
0

, weil Sie Array den Wert Ihrer append Datei-Eingabe nicht festgelegt ist. versuchen Sie dies:

var i=0;//set default array value 
$("#basicFormBtn").click(function(e){ 
i++;//set next array value 
e.preventDefault(); 
var formData = new FormData(); 
var formData = new FormData($('#basicForm')[0]); 
formData.append('file['+i+']', $('input[type=file]')[0].files[0]);//push next array value 
$.ajax({ 
    type:'POST', 
    url :"test_session.php", 
    data: formData, 
    cache: false, 
    contentType: false, 
    processData: false, 
    success: function(data) { 
     console.log(data); 
    }, 
    error:function(exception){ 
     alert('Exeption:'+exception); 
    } 
}); 

});

Verwandte Themen