ajax - 使用 ajax 选择后立即上传图像而无需 onclick 事件
问题描述
我正在尝试使用 ajax 在 laravel 中上传图像,如下所示
$(document).ready(function () {
bsCustomFileInput.init();
$('#exampleInputFile').on('change', function(){
var file = this.files[0];
var fileType = file["type"];
var validImageTypes = ["image/gif", "image/jpeg", "image/png"];
if ($.inArray(fileType, validImageTypes) < 0) {
// invalid file type code goes here.
alert('Please select a valid image in the following formats .gif, .jpeg, .png');
}else{
//get the image and place it in a variable
$.ajaxSetup({
headers: {
'_token' : $('input[name=_token]').val()
}
});
var formData = new FormData(document.getElementById("#upload-image-form"));
alert("Created FormData, " + [...formData.keys()].length + " keys in data");
$('#image-input-error').text('');
$.ajax({
type:'POST',
url: `/property/images/add`,
data: formData,
contentType: false,
processData: false,
success: function(response) {
if (response) {
$('#exampleInputFile').reset();
$('#images').append("<img class='img-responsive' src='uploads/property/small/"+
response.path +"'/>");
alert('Image has been uploaded successfully');
}
},
error: function(response){
console.log(response);
$('#image-input-error').text(response.responseJSON.errors);
}
});
}
});
});
我的问题是选择后出现以下错误
Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.
at HTMLInputElement.<anonymous> (add:234)
at HTMLInputElement.dispatch (jquery.min.js:2)
at HTMLInputElement.v.handle (jquery.min.js:2)
引发错误的行是实例化 FormData 的行。我可能做错了什么,或者更确切地说,如何在没有点击事件的情况下上传图片?
解决方案
经过多次尝试和阅读,我最终得到了这段代码
<script type="text/javascript">
$(document).ready(function () {
bsCustomFileInput.init();
$.ajaxSetup({
headers: {'X-CSRF-TOKEN': $('input[name=_token]').val()}
});
$('#images').change(function () {
event.preventDefault();
let image_upload = new FormData();
let TotalImages = $('#images')[0].files.length; //Total Images
let images = $('#images')[0];
let p_id = $('input[name=p_id]').val();
for (let i = 0; i < TotalImages; i++) {
image_upload.append('images[]', images.files[i]);
}
image_upload.append('TotalImages', TotalImages);
image_upload.append('p_id', p_id);
$.ajax({
method: 'POST',
url: '{{ route('image.add') }}',
data: image_upload,
contentType: false,
processData: false,
success: function (images) {
Swal.fire(
'Success!',
'Images uploaded successfully',
'success'
);
$('#images').reset();
},
error: function () {
Swal.fire(
'Failed!',
'An error occured please try again',
'error'
);
$('#images').reset();
}
});
});
});
</script>
它确实有效并消除了故障点,并且还更新了先前使用的故障点
推荐阅读
- graphviz - 如何在不改变安排的情况下将交易对手 B 连接到 C 以及反之亦然
- javascript - 函数 .data() 不读取内容 onCreate FIrebase 云触发器
- ansible - 如何从 Ansible 连接到 Rally
- excel - 是否有一个 Excel 公式可以返回一个时间范围内的日历月数?
- linux - 从 uart 读取
- php - 如何删除引导面板中不需要的中断
- openvpn - 一段时间后 OpenVPN 失去连接
- ruby-on-rails - rails crypt_keeper gem的问题
- html - 如果表单包含大表格,则使用提交按钮提交 HTML 表单需要 15 秒
- cuda - 解释 ptxas 的详细输出,第二部分