javascript - Laravel 8：AJAX 使用 onchange 上传文件

Question

我想在 laravel 8 中使用 onchange 上传多个文件。是否可以仅通过 onchange 上传？我有这个 html 表单。我希望你们能帮助我。谢谢

<form method="POST" enctype="multipart/form-data" id="upload_form">
 @csrf
    <input type="file" name="file[]" id="file" multiple  >
</form>      

这是我的 Jquery 和 Ajax 脚本。

<script>
function uploadfile(){
    
    var formData = new FormData($('#upload_form')[0]);
    

    $.ajaxSetup({
    headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
    });

    $.ajax({
      type:'POST',
      url: "{{ route('dropzone-action') }}",
       data: formData,
       contentType: false,
       processData: false,
       success: (response) => {
         if (response) {
           this.reset();
           alert('Image has been uploaded successfully');
         }
   

       },
       error: function(response){
          console.log(response);
            $('#image-input-error').text(response.responseJSON.errors.file);
       }
   });

}

这是我的控制器

function action(Request $request){
$request->validate([
    'file' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
    ]);
if($request->hasFile('file')){
    foreach($request->file as $file) {
        $completeFileName = $file->getClientOriginalName();
        $fileNameOnly = pathinfo($completeFileName, PATHINFO_FILENAME);
        $extension = $file->getClientOriginalExtension();
        $file->storeAs('uploads', $completeFileName);
    }
}
    return response()->json('Image uploaded successfully');

}

标签： javascriptjqueryajaxlaravellaravel-8

Answer 1

您可以调用更改方法

$("#file").change(function() {
     uploadfile();
});

并在验证中

$request->validate([
    'file.*' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
    ]);

并在控制器中

function action(Request $request){
$request->validate([
    'file.*' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
    ]);

    foreach($request->file as $file) {
        if($file!=null){
           $completeFileName = $file->getClientOriginalName();
           $fileNameOnly = pathinfo($completeFileName, PATHINFO_FILENAME);
           $extension = $file->getClientOriginalExtension();
           $file->storeAs('uploads', $completeFileName);
    }
}

    return response()->json('Image uploaded successfully');
}