Created
March 11, 2022 17:23
-
-
Save zahra-ove/d844b75bf7645302c3fba13787a7685f to your computer and use it in GitHub Desktop.
How to upload multiple images via ajax
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html lang="en">Compatible" content="ie=edge"> | |
<meta name="csrf-token" content="{{csrf_token()}}"> | |
<script src="{{asset('js/jquery-3.6.0.min.js')}}"></script> | |
<title>Document</title> | |
</head> | |
<body> | |
<form method=" | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" | |
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> | |
<meta http-equiv="X-UA-POST" action="javascript:void(0)" enctype="multipart/form-data" id="formupload"> | |
<input type="file" name="pic1[]" id="pic1" multiple /> | |
<input type="submit" id="subBtn" /> | |
</form> | |
<script src="{{asset('/js/multipleUpload.js')}}"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(document).ready(function(){ | |
$("#formupload").submit(function(e) { | |
e.preventDefault(); | |
//get number of uploaded files | |
let num = $("#pic1")[0].files.length; | |
let allFiles = $("#pic1")[0].files; | |
console.log(allFiles); | |
console.log(num); | |
let formdata = new FormData(this); | |
console.log(formdata); | |
$.ajaxSetup({ | |
headers: { | |
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') | |
} | |
}); | |
$.ajax({ | |
type:'POST', | |
data: formdata, | |
url: "/multipleUpload", | |
cache:false, | |
contentType: false, | |
processData: false, | |
success: (data) => { | |
this.reset(); | |
console.log('Files has been uploaded using jQuery ajax'); | |
console.log(data); | |
}, | |
error: function(data){ | |
console.log(data.responseJSON.errors); | |
console.log(data); | |
} | |
}); | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
namespace App\Http\Controllers; | |
use Illuminate\Http\Request; | |
use Illuminate\Support\Facades\Storage; | |
class UploadController extends Controller | |
{ | |
public function showForm() | |
{ | |
return view('fileUpload.uploadForm'); | |
} | |
public function multipleUpload(Request $request) | |
{ | |
$data = $request->file('pic1'); | |
foreach($data as $datum){ | |
$num--; | |
$fileName = $datum->getClientOriginalName(); | |
Storage::disk('public')->putFileAs('/uploads', $datum, $fileName); | |
} | |
$result = [ | |
'status' => 'success', | |
]; | |
return $result; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
how to upload multiple images via ajax