使用 Ajax 问题上传文件答案

【问题标题】：Uploading File using Ajax Issue使用 Ajax 问题上传文件
【发布时间】：2018-10-04 04:43:28
【问题描述】：

我的 HTML 表单

<center>
    <form enctype="multipart/form-data">
           {{ csrf_field() }}
         <label class="fileContainer">
          <input type="file" id="uploadFile" name="input_upload_file[]" multiple />
        </label>                       
    </form>
   <button onclick="uploadFile()">Upload</button>
 </center>

我的 AJAX

我的 Ajax 看起来不错，但问题是输入文件值。我想不通。

When I try this var input_upload_file = $('#uploadFile').val();

它将返回 例如。 C:/fakepath/image.png

  function uploadFile(){
  var input_upload_file = $('#uploadFile').val();
  alert(input_upload_file);
  $.ajax({
    type:'POST',
    url:'{{ url("/upload-file") }}',
    headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
    data: {input_upload_file:input_upload_file},
    success: function(data){}else{}
     },
    error: function(data){ }
    });      
}

任何人请帮助我！

【问题讨论】：

你检查过这个吗？：stackoverflow.com/questions/2320069/jquery-ajax-file-upload
是的，我已经结帐了
jQuery Ajax File Upload的可能重复
我会检查一下@Ohgodwhy
使用formdata上传文件。

标签： jquery ajax laravel file upload

【解决方案1】：

在您的刀片视图中：

  <head>
  <meta name="csrf-token" content="{{ csrf_token() }}"/>
  </head>

  <body>
     <form id="image_upload_form">
       {{ csrf_field() }}
        <label class="fileContainer">
        <input type="file" id="uploadFile" name="input_upload_file[]" multiple />
    </label>                       
    </form>
    <button type="button" onclick="uploadFile()">Upload</button>
  </body>

你的 Ajax 函数应该是这样的：

<script>
   function uploadFile(){

    var form = new FormData(); 

     $.each($("#uploadFile")[0].files, function(i, file) {
       data.append('input_upload_file['+i+']', file);
     });

      $.ajax({
        async: true,
        crossDomain: true,
        url: "YOUR URL",
        method: "POST",
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        processData: false,
        contentType: false,
        mimeType: "multipart/form-data",
        data: form,
        success:function(response){

        },error:function(err){

        }
    });
 } 
</script>

【讨论】：

我会试试这个
我收到这个错误 Uncaught ReferenceError: data is not defined data.append('input_upload_file['+i+']', file);