<!doctype html>
<html lang="en">
<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-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 上传单个图片 -->
<input type="file" id="upload">
<!-- 上传多个图片 -->
<input type="file" multiple id="uploadMultiple">
<script src="home/js/jquery-3.2.1.min-1.js"></script>
<script>
document.getElementById('upload').addEventListener('change', function (event) {
var $file = event.currentTarget;
var formData = new FormData();
var file = $file.files;
formData = new FormData();
formData.append(file[0].name, file[0]);
$.ajax({
url: '/upload',
type: 'POST',
dataType: 'json',
data: formData,
contentType: false,
processData: false
})
.done(data => {
console.log(data)
$('#box').append(`<div class="photo-item"><img class="item-image" width="100%" height="100%" src="${data.url}"/></div>`);
})
.fail(data => {
console.log(data)
})
});
document.getElementById('uploadMultiple').addEventListener('change', function (event) {
var $file = event.currentTarget;
var formData = new FormData();
var file = $file.files;
for (var i = 0; i < file.length; i++) {
formData = new FormData();
formData.append(file[i].name, file[i]);
$.ajax({
url: '/upload',
type: 'POST',
dataType: 'json',
data: formData,
contentType: false,
processData: false
})
.done(data => {
console.log(data)
$('#box').append(`<div class="photo-item"><img class="item-image" width="100%" height="100%" src="${data.url}"/></div>`);
})
.fail(data => {
console.log(data);
});
}
});
</script>
</body>
</html>