如何通过AJAX使用PHP获取上传的图像 - How to get the uploaded image using PHP via AJAX

How to get the uploaded image using PHP via AJAX

我需要通过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值。但我需要所有表单字段值。

<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上载文件。

这将起作用。

$('#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);
      }
  });   
}));

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

您需要使用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);
             }
        });
    });

尝试获取文件字段值：

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

此代码是