So laden Sie mehrere Bilder in einen Ordner mit AJAX PHP und JQuery

Ich versuche, mehrere Bilder in einen Ordner gleichzeitig zu laden, indem Sie AJAX, JQuery und PHP verwenden. Der Code wird für das Hochladen einzelner Dateien ausgeführt, aber nicht für das Hochladen mehrerer Bilder. Wenn ich ein einzelnes Bild ohne Schleife hochlade, funktioniert es gut, aber im Falle einer Schleife funktioniert es nicht.So laden Sie mehrere Bilder in einen Ordner mit AJAX PHP und JQuery

Ich verwende den folgenden Code.

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Upload Iamge</title> 
     <link href="style.css" rel="stylesheet" type="text/css"> 
     <script src="jquery-1.12.0.min.js"></script> 

     <script type="text/javascript"> 
      $(document).ready(function(){ 
       $("#but_upload").click(function(){ 
        var fd = new FormData(); 
        //following code is working fine in for single image upload 
        // var files = $('#file')[0].files[0]; 
        // fd.append('file',files); 

        //this code not working for multiple image upload   
        var names = []; 
        for (var i = 0; i < $('#file').get(0).files.length; ++i) { 
         names.push($('#file').get(0).files[i].name); 
        } 
        fd.append('file[]',names); 

        /*var ins = document.getElementById('file').files.length; 
        for (var x = 0; x <ins; x++) { 
         fd.append("file", document.getElementById('file').files[x]); 
        }*/ 

        $.ajax({ 
         url:'upload.php', 
         type:'post', 
         data:fd, 
         contentType: false, 
         processData: false, 
         success:function(response){ 
          if(response != 0){ 
           $("#img").attr("src",response); 
          } 
         }, 
         error:function(response){ 
          alert('error : ' + JSON.stringify(response)); 
         } 
        }); 
       }); 
      }); 
     </script> 
    </head> 

    //HTML Part 

    <body> 
     <div class="container"> 
      <h1>AJAX File upload</h1> 
      <form method="post" action="" id="myform"> 
       <div> 
        <img src="" id="img" width="100" height="100"> 
       </div> 
       <div> 
        <input type="file" id="file" name="file" multiple="multiple" /> 
        <input type="button" class="button" value="Upload" 
     id="but_upload"> 
       </div> 
      </form> 
     </div> 
    </body> 
</html> 

//PHP Code 

<?php 
    /* Getting file name */ 
    echo "<script>alert('yes');</script>"; 
    //without loop working fine 
    $count = count($_FILES['file']['name']); 
    for ($i = 0; $i < $count; $i++) { 
     $filename = $_FILES['file']['name'][$i]; 
     /* Location */ 
     $location = "upload/".$filename; 
     /* Upload file */ 
     if(move_uploaded_file($_FILES['file']['tmp_name'],$location)){ 
      echo $location; 
     } else { 
      echo 0; 
    } 
} 
?>

Quelle

2017-12-21 adesh singh

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Upload Iamge</title> 
     <script type="text/javascript"> 
      $(document).ready(function(){ 
       $("#but_upload").click(function(){ 
        var fd = new FormData(); 
        //following code is working fine in for single image upload 
        // var files = $('#file')[0].files[0]; 
        // fd.append('file',files); 

        //this code not working for multiple image upload   
        var names = []; 
        var file_data = $('input[type="file"]')[0].files; 
        // for multiple files 
        for(var i = 0;i<file_data.length;i++){ 
         fd.append("file_"+i, file_data[i]); 
        } 
        fd.append('file[]',names); 

        /*var ins = document.getElementById('file').files.length; 
        for (var x = 0; x <ins; x++) { 
         fd.append("file", document.getElementById('file').files[x]); 
        }*/ 

        $.ajax({ 
         url:'upload.php', 
         type:'post', 
         data:fd, 
         contentType: false, 
         processData: false, 
         success:function(response){ 
          if(response != 0){ 
           $("#img").attr("src",response); 
          } 
         }, 
         error:function(response){ 
          alert('error : ' + JSON.stringify(response)); 
         } 
        }); 
       }); 
      }); 
     </script> 
    </head> 

    //HTML Part 

    <body> 
     <div class="container"> 
      <h1>AJAX File upload</h1> 
      <form method="post" action="" id="myform"> 
       <div> 
        <img src="" id="img" width="100" height="100"> 
       </div> 
       <div> 
        <input type="file" id="file" name="file" multiple="multiple" /> 
        <input type="button" class="button" value="Upload" 
     id="but_upload"> 
       </div> 
      </form> 
     </div> 
    </body> 
</html>

haben Änderungen in folgenden Code gemacht

var file_data = $('input[type="file"]')[0].files; // for multiple files 
    for(var i = 0;i<file_data.length;i++){ 
    fd.append("file_"+i, file_data[i]); 
} 
fd.append('file[]',names);

Und es gibt auch Änderungen in PHP-Code

<?php 
/* Getting file name */ 
//without loop working fine 

    $count = count($_FILES); 
    for ($i = 0; $i < $count; $i++) { 
     $filename = $_FILES['file_'.$i]; 
     /* Location */ 
     echo $location = "upload/".$filename['name']; 
     /* Upload file */ 
     if(move_uploaded_file($filename['tmp_name'],$location)){ 
      echo $location; 
     } else { 
      echo 0; 
    } 
} 
?>

Anzahl der Dateien und Dateinamen werden in einer anderen Art und Weise comming also habe ich die Änderungen nach Bedarf vorgenommen anstatt wenn Dateiarray wie $_FILE['file_0'],gibt 0 und so weiter, Ich habe auch die Erlaubnis von Upload-Verzeichnis ändern bitte überprüfen Sie, ob Ihr Verzeichnis Lese- und Schreibberechtigung (777) oder nicht, dieser Code funktioniert für mich können Sie versuchen, ich hoffe, es wird auch für Sie funktionieren: -)

Quelle

2017-12-21 08:38:03

selbst arbeitet nach der Zugabe von seiner ich nicht $ hinzuzufügen! –

Gibt es einen Fehler oder etwas, verwenden Sie error_reporting (-1); ini_set ("display_errors", true) in Ihrer PHP-Seite und Check-in-Konsole für Fehler –

Kein Fehler ist da! Versuchen Sie, dieses Beispiel zu starten –

In der Schleife müssen Sie index von bestimmten Datei

move_uploaded_file($_FILES['file']['tmp_name'][$i],$location); // $i is index

Quelle

2017-12-21 08:42:39

i haben bereits die gleiche –

geantwortet, auch nach dem Hinzufügen Index hier nicht funktioniert –

So laden Sie mehrere Bilder in einen Ordner mit AJAX PHP und JQuery

Antwort

Verwandte Themen