如何通过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上传图片

回答

相关问题