[JQUERY] 어떻게 Ajax를 사용하여 PHP 파일에 이미지를 보내?

어떻게 Ajax를 사용하여 PHP 파일에 이미지를 보내?

해결법

1. ---

   1.이 작동합니다.

   이 작동합니다.

   $("form[name='uploader']").submit(function(e) {
     var formData = new FormData($(this)[0]);
   
     $.ajax({
       url: "page.php",
       type: "POST",
       data: formData,
       success: function (msg) {
         alert(msg)
       },
       cache: false,
       contentType: false,
       processData: false
     });
   
     e.preventDefault();
   });
   

   당신이 검색 한 무엇인가?

2. ---

   2.여기에 특정 폴더로 한 번에 여러 이미지를 업로드하는 코드입니다!

   여기에 특정 폴더로 한 번에 여러 이미지를 업로드하는 코드입니다!

   html로 :

   <form method="post" enctype="multipart/form-data" id="image_upload_form" action="submit_image.php">
   <input type="file" name="images" id="images" multiple accept="image/x-png, image/gif, image/jpeg, image/jpg" />
   <button type="submit" id="btn">Upload Files!</button>
   </form>
   <div id="response"></div>
   <ul id="image-list">
   
   </ul>
   

   PHP는 :

   <?php
   $errors = $_FILES["images"]["error"];
   foreach ($errors as $key => $error) {
   if ($error == UPLOAD_ERR_OK) {
       $name = $_FILES["images"]["name"][$key];
       //$ext = pathinfo($name, PATHINFO_EXTENSION);
       $name = explode("_", $name);
       $imagename='';
       foreach($name as $letter){
           $imagename .= $letter;
       }
   
       move_uploaded_file( $_FILES["images"]["tmp_name"][$key], "images/uploads/" .  $imagename);
   
   }
   }
   
   
   echo "<h2>Successfully Uploaded Images</h2>";
   

   그리고 마지막으로, 자바 스크립트 / 아약스 :

   (function () {
   var input = document.getElementById("images"), 
       formdata = false;
   
   function showUploadedItem (source) {
       var list = document.getElementById("image-list"),
           li   = document.createElement("li"),
           img  = document.createElement("img");
       img.src = source;
       li.appendChild(img);
       list.appendChild(li);
   }   
   
   if (window.FormData) {
       formdata = new FormData();
       document.getElementById("btn").style.display = "none";
   }
   
   input.addEventListener("change", function (evt) {
       document.getElementById("response").innerHTML = "Uploading . . ."
       var i = 0, len = this.files.length, img, reader, file;
   
       for ( ; i < len; i++ ) {
           file = this.files[i];
   
           if (!!file.type.match(/image.*/)) {
               if ( window.FileReader ) {
                   reader = new FileReader();
                   reader.onloadend = function (e) { 
                       showUploadedItem(e.target.result, file.fileName);
                   };
                   reader.readAsDataURL(file);
               }
               if (formdata) {
                   formdata.append("images[]", file);
               }
           }   
       }
   
       if (formdata) {
           $.ajax({
               url: "submit_image.php",
               type: "POST",
               data: formdata,
               processData: false,
               contentType: false,
               success: function (res) {
                   document.getElementById("response").innerHTML = res;
               }
           });
       }
   }, false);
   }());
   

   도움이 되었기를 바랍니다

3. ---

   3.한 Ajax 요청에 Ajax를 통해 모두 여러 텍스트 입력, 여러 개의 파일을 게시

   한 Ajax 요청에 Ajax를 통해 모두 여러 텍스트 입력, 여러 개의 파일을 게시

   HTML

   <form class="form-horizontal" id="myform" enctype="multipart/form-data">
   <input type="text" name="name" class="form-control">
   <input type="text" name="email" class="form-control">
   <input type="file" name="image" class="form-control">
   <input type="file" name="anotherFile" class="form-control">
   

   JQuery와 코드

   $(document).on('click','#btnSendData',function (event) {
       event.preventDefault();
       var form = $('#myform')[0];
       var formData = new FormData(form);
       // Set header if need any otherwise remove setup part
       $.ajaxSetup({
           headers: {
               'X-CSRF-TOKEN': $('meta[name="token"]').attr('value')
           }
       });
       $.ajax({
           url: "{{route('sendFormWithImage')}}",// your request url
           data: formData,
           processData: false,
           contentType: false,
           type: 'POST',
           success: function (data) {
               console.log(data);
           },
           error: function () {
   
           }
       });
   
   });
   

4. ---

   4.이는 jQuery 코드는 간단한 아약스를 포함 :

   이는 jQuery 코드는 간단한 아약스를 포함 :

      $("#product").on("input", function(event) {
         var data=$("#nameform").serialize();
       $.post("./__partails/search-productbyCat.php",data,function(e){
          $(".result").empty().append(e);
   
        });
   
   
       });
   

   HTML 요소는 어떤 요소를 사용할 수 있습니다 :

        <form id="nameform">
        <input type="text" name="product" id="product">
        </form>
   

   PHP 코드 :

     $pdo=new PDO("mysql:host=localhost;dbname=onlineshooping","root","");
     $Catagoryf=$_POST['product'];
   
    $pricef=$_POST['price'];
     $colorf=$_POST['color'];
   
     $stmtcat=$pdo->prepare('SELECT * from products where Catagory =?');
     $stmtcat->execute(array($Catagoryf));
   
     while($result=$stmtcat->fetch(PDO::FETCH_ASSOC)){
     $iddb=$result['ID'];
        $namedb=$result['Name'];
       $pricedb=$result['Price'];
        $colordb=$result['Color'];
   
      echo "<tr>";
      echo "<td><a href=./pages/productsinfo.php?id=".$iddb."> $namedb</a> </td>".'<br>'; 
      echo "<td><pre>$pricedb</pre></td>";
      echo "<td><pre>    $colordb</pre>";
      echo "</tr>";
   

   쉬운 방법

5. ---

   5.

   <html>
     <head>
       <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
       <script>
         $(function () {
   
           $('#abc').on('submit', function (e) {
   
             e.preventDefault();
   
             $.ajax({
               url: 'post.php',
               method:'POST',
               data: new FormData(this),
               contentType: false,
               cache:false,
               processData:false,
               success: function (data) {
                 alert(data);
                 location.reload();
               }
             });
   
           });
   
         });
       </script>
     </head>
     <body>
       <form enctype= "multipart/form-data" id="abc">
         <input name="fname" ><br>
         <input name="lname"><br>
         <input type="file" name="file" required=""><br>
         <input name="submit" type="submit" value="Submit">
       </form>
     </body>
   </html>
   

from https://stackoverflow.com/questions/21164365/how-to-send-image-to-php-file-using-ajax by cc-by-sa and MIT license