Use Formdata y Ajax para cargar imágenes
Descripción:
cargue una sola imagen a la interfaz, devuelva la URL y escríbala en la base de datos
<input type="file" name="file" id="file" class="file">
<input type="text" name="url" id="url" class="url" value="" style="display: none;">
//设置隐藏文本框用来存储返回的url
Comprender la
carga de imágenes de FormData :
document.querySelector('.file').addEventListener('change', function (e) {
let files = e.target.files
//console.log(files)
// 判断是否有文件
if (!files.length) return
// 上传文件 创建FormData
// previewFile(file);
let formData = new FormData()
// upFile就是后台接收的key
formData.append('file', files[0])
// 将formdata发送到后台即可
// 使用ajax将数据发送到后台
$.ajax({
url: '接口url',
type: 'post',
//dataType: 'json',
contentType: false, //禁止设置请求类型
processData: false,
data: formData,
processData: false,
success: function (data) {
$('#url').val(data);
}
})
})
consolog.log (e) devuelve ==>
console.log (e.target) ->
Devuelve el objeto de entrada:
console.log (e.target.files) ->
Devuelve
algunos atributos en una lista de archivos que se pueden pasar a través de e.target. Obtener por archivos [0] .size
Puede obtener la URL devuelta por la interfaz a través de ajax y escribir esta URL en el campo de texto oculto. Almacene la URL en la base de datos a través de ajax.
$('#btn-save').click(function () {
$.ajax({
url: "http://localhost:8080/banner",
type: 'post',
data: {
'id': $("#id").val(),
"name": $("#name").val(),
"alt": $("#alt").val(),
"createTime": $("#createTime").val(),
'createBy': $('#createBy').val(),
"url": $('#url').val()
// "file": $("#file")
},
success: function (data) {
//alert("weqeq")
$('#banner').empty();
$('#del-x').trigger("click");
getImage();
}
})
//$('#del-x').trigger("click");
})
Haga clic en el botón para guardar el contenido, incluida la URL de la base de datos, y cierre el cuadro emergente.