如何通過jquery上傳圖片

過去幾天裏，我一直在拼命提交一個帶有jquery和ajax的表單。問題IM面是將圖像上傳表單字段如何通過jquery上傳圖片

我的形式是這樣

<form action="#" method="GET" role="form" enctype="multipart/form-data"> 
<input type="text" placeholder="Name" name="name"> 
<input type="file" name="img" multiple> 
    <button type="submit">Submit </button> 
</form>

和我用於獲取表單值jQuery腳本是這樣的

$("form").submit(function (event) { 
      $.dataArray = $(this).serializeArray(); // array of form data 
      console.log($.dataArray); 
      event.preventDefault(); 
     });

但是，如果圖像返回null，則返回除圖像之外的所有字段值。我如何存儲數據數據？我想存儲所以我可以通過AJAX 將值發送到服務器任何人都可以幫助我，謝謝！

來源

2017-05-31 Racoon

爲什麼你想將form的值存儲到你的'$ .dataArray'變量中是否有原因？ – eeya

[我怎樣才能異步上傳文件？]（https://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously） – prasanth

@eeya是的，這樣我就可以傳遞數據通過ajax與其他表單內容鏈接到api鏈接 – Racoon

對於上傳單個圖像的類似這樣的

 <html> 
     <head> 
      <meta charset="UTF-8"> 
      <title>AJAX image upload with, jQuery</title> 
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
      <script type="text/javascript"> 
       $(document).ready(function (e) { 
        $('#upload').on('click', function() { 
         var file_data = $('#file').prop('files')[0]; 
         var form_data = new FormData(); 
         form_data.append('file', file_data); 
         $.ajax({ 
          url: 'http://localhost/ci/index.php/welcome/upload', // point to server-side controller method 
          dataType: 'text', // what to expect back from the server 
          cache: false, 
          contentType: false, 
          processData: false, 
          data: form_data, 
          type: 'post', 
          success: function (response) { 
           $('#msg').html(response); // display success response from the server 
          }, 
          error: function (response) { 
           $('#msg').html(response); // display error response from the server 
          } 
         }); 
        }); 
       }); 
      </script> 
     </head> 
     <body> 
      <p id="msg"></p> 

      <input type="file" id="file" name="file" multiple /> 
      <button id="upload">Upload</button> 
     </body> 
    </html>

多個圖像的ü將不得不環路它有點不同

來源

2017-07-29 16:08:31 Racoon

試試這段代碼，它適用於我。

$("form").submit(function (event) { 

    var form_data = new FormData($(this)); 

    $.ajax({ 
     url : url, 
     type : 'POST', 
     data : form_data, 
     processData: false, // tell jQuery not to process the data 
     contentType: false, 
     success : function(resp){ 
     } 
    }); 
});

來源

2017-05-31 11:54:00

試試看看這個代碼。使用formData()

$("form").submit(function (event) { 
 
      
 
    var formData = new FormData($(this)); 
 

 
    $.ajax({ 
 
      url: url, 
 
      type: 'POST', 
 
      data: formData, 
 
      async: false, 
 
      success: function (data) { 
 
       //success callback 
 
      }, 
 
      cache: false, 
 
      contentType: false, 
 
      processData: false 
 
     }); 
 

 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="#" method="GET" role="form" enctype="multipart/form-data"> 
 
<input type="text" placeholder="Name" name="name"> 
 
<input type="file" name="img" multiple> 
 
    <button type="submit">Submit </button> 
 
</form>

來源

2017-05-31 11:54:20

的serialize（）方法無法發佈文件數據。

對於使用AJAX使用FORMDATA發送文件而不是串行化

HTML5引入FORMDATA以允許開發者建立的形式動態對象，然後通過發送AJAX這種形式的對象。

你的HTML

<form action="upload_image.php" id="form_img" method="GET" role="form" enctype="multipart/form-data"> 
<input type="text" placeholder="Name" name="name"> 
<input type="file" name="img" multiple> 
    <button type="submit">Submit </button> 
</form>

AJAX調用

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#form_img").submit(function(e){ 
      e.preventDefault(); 
      var formData = new FormData($("#form_img")[0]); 

      $.ajax({ 
       url : $("#form_img").attr('action'), 
       type : 'POST', 
       data : formData, 
       contentType : false, 
       processData : false, 
       success: function(resp) { 
        console.log(resp);       
       } 
      }); 
     }); 
    }); 

</script>

upload_image.php

print_r($_FILES) //check you get file data or not

試試這個way.Hop e它會幫你

來源

2017-05-31 11:54:36 Nidhi

請檢查下面的代碼，我正在使用上傳圖片。

$.ajax({ 
      url: UPLOADURL, // Url to which the request is send 
      type: "POST",  // Type of request to be send, called as method 
      data: new FormData(this),// Data sent to server, a set of key/value pairs representing form fields and values 
      contentType: false,// The content type used when sending data to the server. Default is: "application/x-www-form-urlencoded" 
      cache: false,// To unable request pages to be cached 
      processData:false,// To send DOMDocument or non processed data file it is set to false (i.e. data should not be in the form of string) 
      success: function(data)// A function to be called if request succeeds 
      { 

       data = JSON.parse(data); 
       console.log(data); 
       if(data.status == "Success"){ 
        attachmentListing(); 
        //$("#mailerMessage").html(data.data.mailStatus); 
        //$("#mailerMessage").fadeIn(); 
        setTimeout(function() { 
         $("#mailerMessage").fadeOut(); 
        },5000); 
       }else{ 
        toastr.warning(data.status); 

       } 
       $("#ajaxloader").addClass("hideajaxLoader"); 
      }, 
      error: function (jqXHR, errdata, errorThrown) { 
       log("error"); 
       $("#ajaxloader").addClass("hideajaxLoader"); 
      } 
     });

來源

2017-05-31 12:17:07

我發現了一個類似的問題，希望它會幫助你。

Upload image using jquery

另一個值得考慮的選擇是使用某種jQuery plugin to upload images像Cloudinary並將其包含在HTML頁面：

<script src='jquery.min.js' type='text/javascript'></script> 
<script src='jquery.cloudinary.js' type='text/javascript'></script>

，然後包括所有必需的jQuery的文件：

<script src='jquery.min.js' type='text/javascript'></script> 
<script src='jquery.ui.widget.js' type='text/javascript'></script> 
<script src='jquery.iframe-transport.js' type='text/javascript'></script> 
<script src='jquery.fileupload.js' type='text/javascript'></script> 
<script src='jquery.cloudinary.js' type='text/javascript'></script>

來源

2017-08-06 12:13:39

如何通過jquery上傳圖片

回答

相關問題