Question

我正在尝试上传多个图像文件。请检查我的代码。

   <form id="fileupload" method="POST" enctype="multipart/form-data">
      <input type="file" name="files[]" multiple="multiple" id="images_input">
  </from>

      $(document).ready(function(){
      $('body').on('submit', '#fileupload', function(e){
        e.preventDefault();
        var files = document.getElementById("images_input").files;
        var files_array = [];
   $(files).each(function(index, value){
      files_array.push(value);
      // files_array.push(value);
   });//each
     var user_id = $("#user_id_input").val();
     var product_name = $("#product_name_input").val();
   console.log("Data",files[0]);
    var url = "../filemanager/s3_laravel/public/upload";
    $.ajax({
      url: url,
      data:{
      files:files_array, 
      user_id: user_id,
      product_name: product_name
      },
      type: 'POST',
      success: function(data){
        alert(data);
      }
  });
});

    $('#images_input').change(function(){
    $("#fileupload").submit();
  });//change

当我尝试提交它时，出现此错误https://prnt.sc/l8vmhn。请帮助这方面。

Answer 1

添加processData：为您的options对象添加false可修复该错误。

Answer 2

您需要使用FormData API。这样。

<form id="fileupload" method="POST" enctype="multipart/form-data">
    <input type="file" name="files[]" multiple="multiple" id="images_input">
</form>
    <script>
        $(document).ready(function(){
            $('body').on('submit', '#fileupload', function(e){
                e.preventDefault();
                var formData = new FormData();
                var files = document.getElementById("images_input").files;
                $(files).each(function(index, value){
                    formData.append('files[]', value);
                });
                formData.append('user_id', $("#user_id_input").val());
                formData.append('product_name', $("#product_name_input").val());
                var url = "../filemanager/s3_laravel/public/upload";
                $.ajax({
                    type: 'POST',
                    url: url,
                    contentType: false,
                    processData: false,
                    data: formData,
                    success: function(data){
                        alert(data);
                    }
                });
            });

            $('#images_input').change(function(){
                $("#fileupload").submit();
            });
    </script>

Answer 3

最后它是这样的：

       $(document).ready(function(){
           $('#images_input').change(function(){
           $("#fileupload").submit();
           });//change
           $("#fileupload").on('submit',function(event) {
            event.preventDefault();
            var formData = new FormData(this);
            var url = "../filemanager/s3_laravel/public/upload";
            $.ajax({
            url: url, 
            type: "POST",             
            data: formData, 
            contentType: false,        
            cache: false,           
            processData:false,       
            success: function(data) {
                console.log(data);
              }  
            });//
        });//submit
});//ready

如何使用Ajax上传多张图片？

3 个答案: