Question

我需要通过Ajax

使用PHP获取上传的图像

我的表单字段是，

<form action="#" method="post" id="rent_details" name="rent_details" enctype="multipart/form-data">
Upload Image :<input type="file" name="fileToUpload" id="fileToUpload">
type:- <select name="spottype" id="spottype">
  <option value="xxx">xxx</option>
  <option value="yyy">yyy</option>
  <option value="zzz">zzz</option>
</select> 
<input type="button" id="bidm" name="bidm" value="Next"/>
</form>

In ajax call I have following code :-

   $.ajax({
        url: './api/addspot.php',
        data: $('#rent_details').serialize(),
        type: 'POST',   
         contentType: false,                
         success: function(data) {
            alert(data);
        },
        error: function(xhr, status, error) {
         alert(xhr.responseText);
        }
    });

这里我在Ajax成功函数中只获得了spottype值。但是我需要得到所有表单字段的值。

Answer 1

这样可行。

$('#rent_details').on('submit',(function(e) {
    e.preventDefault();
    var formData = new FormData(this);

    $.ajax({
      url: './api/addspot.php',
      data: formData,
      type: 'POST',   
      contentType: false,
      processData: false,            
      success: function(data) {
        alert(data);
      },
      error: function(xhr, status, error) {
       alert(xhr.responseText);
      }
  });   

}));

Answer 2

<form action="#" method="post" id="rent_details" name="rent_details" enctype="multipart/form-data">
Upload Image :<input type="file" name="fileToUpload" id="fileToUpload">
type:- <select name="spottype" id="spottype">
  <option value="xxx">xxx</option>
  <option value="yyy">yyy</option>
  <option value="zzz">zzz</option>
</select> 
<input type="submit" id="bidm" name="bidm" value="Next"/>
</form>

$(document).ready(function(){
    $("#rent_details").submit(function(e){
        e.preventDefault();
        $.ajax({
                method:'POST',
                url: "./api/addspot.php",
                data: new FormData( this ),
               processData: false,
                contentType: false
                }).done(function(data) {
                    console.log(data);
            });
    });
});

在您要求的页面上按名称获取。使用$ _FILES上传文件。

Answer 3

您需要使用FormData（）;

知道此代码不适用于IE9及更低版本。

这适用于多文件上传。

    $(document).on('click', '#bidm', function(e) {
        e.preventDefault();

        var request = new FormData(this);
        var my_files = $(this).closest('form').find('#fileToUpload').files;

        $.each(my_files, function(j,file) {
`              request.append('fileToUpload['+j+']', file);
        });

        $.ajax({
             url: './api/addspot.php',
             data: request,
             dataType: "json",
             contentType: false,
             processData: false,
             enctype: 'multipart/form-data',            
             success: function(data) {
                 alert(data);
             },
             error: function(xhr, status, error) {
                 alert(xhr.responseText);
             }
        });
    });

Answer 4

需要将FormData（）用于ajax数据。它采用了所有表单变量并将其传递给ajax。然后在ajax函数中，您可以检索文件名和临时文件名，并将图像文件保存到需要保存的文件夹中。

Answer 5

尝试此操作以获取文件字段值：

$('input[type=file]').val()

此代码已经完成

如何使用PHP通过AJAX获取上传的图像

5 个答案: