我应该创建一个用于显示文件或图片的控制器文件吗？我在期间使用了锚标签
/带预览的图像显示/
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/js/dropify.min.js" integrity="sha512-8QFTrG0oeOiyWo/VM9Y8kgxdlCryqhIxVeRpWSezdRRAvarxVtwLnGroJgnVW9/XBRduxO/z1GblzPrMQoeuew==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/css/dropify.css" integrity="sha512-In/+MILhf6UMDJU4ZhDL0R0fEpsp4D3Le23m6+ujDWXwl3whwpucJG1PEmI3B07nyJx+875ccs+yX2CqQJUxUw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script>
$(document).ready(function(){
$('.dropify').dropify();
var drEvent = $('#input-file-events').dropify();
var drDestroy = $('#input-file-to-destroy').dropify();
drDestroy = drDestroy.data('dropify')
$('#toggleDropify').on('click', function(e) {
e.preventDefault();
if (drDestroy.isDropified()) {
drDestroy.destroy();
} else {
drDestroy.init();
}
});
});
});
</script>
</head>
<body>
<div class="col-md-3">
Upload Passport(Max Size 5mb)
</div>
<div>
<input id="passport_docs" class="dropify " name="passport_docs" type="file" value="{{ old('passport_docs') }}" data-allowed-file-extensions="pdf doc docx png jpg jpeg" data-max-file-size="5120K" />
</div>
</body>
/*and upload data with formData*/
var passport_docs = $("#passport_docs").prop("files")[0];
var form_data = new FormData();
form_data.append("passport_docs", passport_docs);
$.ajax({
url:"{{route('add-image-ajax')}}",
type: 'POST',
cache: false,
contentType: false,
processData: false,
data: form_data,
dataType: 'json',
success: function (response) {
}
});
您不需要laravel代码，只需使用ajax和jquery：
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url:"{{route('add-image-ajax')}}",
type:'POST',
data: {'_token' : '{{ csrf_token() }}', 'image': response},
success:function(data){
console.log('Crop image has been uploaded');
$('input[name = uploaded_img]').val(data.success);
$("#previewImgTag").attr('src', response);
}
})