上传带有AJAX文件的文件

我试图从olanod answer重新创建本指南，但不适用于我。上传带有AJAX文件的文件

我想用AJAX上传文件，但我得到一个空的$ _ POST：

<form enctype="multipart/form-data"> 
     <input type="file" name="file"> 
     <br> 
     <input type="text" name="as" value="asd"> 
     <!--<button type='button' class="add_more">Add More Files</button>--> 
<input type="button" value="Upload" /> 
</form>

，这是我的脚本（从olanod answer复制粘贴）：

<script> 
     $(document).ready(function(){ 
      /* $('.add_more').click(function(e){ 
       e.preventDefault(); 
       $(this).before("<input name='upfile[]' type='file'/><br>"); 
      });*/ 

      $(':button').on('click', function() 
      { 
       $.ajax({ 
        // Your server script to process the upload 
        url: 'ajax.php', 
        type: 'POST', 

        // Form data 
        data: new FormData($('form')[0]), 

        // Tell jQuery not to process data or worry about content-type 
        // You *must* include these options! 
        cache: false, 
        contentType: false, 
        processData: false, 

        // Custom XMLHttpRequest 
        xhr: function() { 
         var myXhr = $.ajaxSettings.xhr(); 
         if (myXhr.upload) { 
          // For handling the progress of the upload 
          myXhr.upload.addEventListener('progress', function(e) { 
           if (e.lengthComputable) { 
            $('progress').attr({ 
             value: e.loaded, 
             max: e.total, 
            }); 
           } 
          } , false); 
         } 
         return myXhr; 
        }, 
       }); 
      }); 
     }); 
</script>

正如我说，我想看看我要采取什么，这是我的PHP文件的结果：

array（1）{ [“as”] => 串（3） “ASD” }

我返回一个文本字段是肯定的。

P.D：对不起，我的英语。我希望你能理解我，我正在努力！

来源

2017-09-05 Marc Zinni Arranz

你应该使用'$ _FILES'而不是'$ _POST' – C2486

@ user2486噢，我的上帝，我觉得很蠢！感谢m8，你是对的！ –

正如@ user2486说，

您应该使用$ _FILES不是$ _ POST - user2486

他是对的。

来源

2017-09-06 07:33:14

，你可以用这个方法来上传文件

html- 
 

 
<input type="file" class="btn btn-default" name="img2" id="img2" /> 
 

 
javascript- 
 

 
var formData = new FormData(); 
 
      formData.append('Photo', $('#img2')[0].files[0]); 
 
      $.ajax({ 
 
       url: 'ImgUpload.php', 
 
       data: formData, 
 
       type: "POST", 
 
       // THIS MUST BE DONE FOR FILE UPLOADING 
 
       contentType: false, 
 
       processData: false, 
 
       
 
      }).done(function(msg) {

来源

2017-09-05 11:13:42

Check this one.. 

<!DOCTYPE html> 
    <html lang="en"> 
     <head> 
      <title>Ajax Image Upload</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="../js/jquery-3.1.1.min.js"></script> 
      <script src="../js/validator.js"></script> 
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
     </head> 
     <body> 

      <div class="container"> 
       <span id="msg"></span> 
       <h2>Image Upload Form</h2> 
       <form data-toggle="validator" role="form" name="image-form" method="post" enctype="multipart/form-data" id="my-form" action="<?php $_SERVER['PHP_SELF']; ?>"> 
        <div class="form-group"> 
         <label for="image">Image:</label> 
         <input type="file" id="image" name="image[]" data-error="Upload Image" multiple required> 
         <div class="help-block with-errors"></div> 
        </div>  
        <button type="submit" class="btn btn-default">Submit</button> 
       </form> 
      </div> 

     </body> 
    </html> 


    <script type="text/javascript"> 
     $(document).ready(function (e) { 
      $("#my-form").on('submit', (function (e) { 
       e.preventDefault(); 
       var formData = new FormData(this);    
        $.ajax({ 
         url: "upload.php", 
         type: "POST", 
         data: formData, 
         contentType: false, 
         cache: false, 
         processData: false, 
         success: function (data) { 
          $("#my-form")[0].reset(); 
          //alert(data); 
          $("#msg").html(data); 
         }, 
        }); 

       return false; //IE 
      })); 
     }); 
    </script>

来源

2017-09-05 11:28:50

上传带有AJAX文件的文件

回答

相关问题