Question

我的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){ }
    });      
}

任何人都请帮助我！

Answer 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>

使用Ajax问题上传文件

1 个答案: