ajax php 및 jquery를 사용하여 여러 이미지를 폴더에 업로드하는 방법

AJAX, JQuery 및 PHP를 사용하여 한 번에 여러 이미지를 한 폴더에 업로드하려고합니다. 코드는 단일 파일 업로드를 위해 실행 중이지만 여러 이미지 업로드를 위해 실행되지 않습니다. 하나의 이미지를 루프없이 업로드 할 경우 잘 작동하지만 루프의 경우에는 작동하지 않습니다.ajax php 및 jquery를 사용하여 여러 이미지를 폴더에 업로드하는 방법

다음 코드를 사용하고 있습니다.

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

출처

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>

아래 코드

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

에서 변경 한 또한 파일과 파일 이름의 개수가 다른 방법으로오고있다

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

PHP 코드가 변경된다 그래서 나는 대신 파일 배열을 $_FILE['file_0'],과 같이 제공 할 때 필요한대로 변경했다. 0 등등, 또한 업로드 디렉토리의 허가를 변경하십시오. 디렉토리에 읽기 및 쓰기 권한 (777)이 있는지 확인하십시오.이 코드는 저에게 효과적입니다. 시도해 볼 수 있습니다.)

루프에서

출처

2017-12-21 08:38:03

도 $ 추가 i가 작동하지 않는 그 후 특정 파일의 index를 추가해야합니다! –

거기에 오류가 있거나 뭔가 error_reporting (-1); ini_set ("display_errors", true) PHP 페이지에서 오류를 콘솔에 체크인하십시오 –

오류가 없습니다.이 예제를 실행 해보십시오. –

당신은

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

출처

2017-12-21 08:42:39

이미 색인을 추가 한 후에도 동일하게 대답했습니다. –

여기에서 작동하지 않습니다. –

ajax php 및 jquery를 사용하여 여러 이미지를 폴더에 업로드하는 방법

답변

관련 문제