ajax调用接口图片上传功能
2020-03-15 本文已影响0人
五四青年_4e7d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jquery-3.2.1.min.js"></script>
</head>
<body>
<input type="file" name id="file">
<button onclick="doUpload()">提交</button>
<img src=""/>
</body>
</html>
<script>
function doUpload(){
let file = $("#file").get(0).files[0]
let formdata = new FormData()
formdata.append('cloud',file)
console.log(file)
$.ajax({
url:'http://localhost:3000/file/upload',
type:'POST',
cache:false,
data:formdata,
processData:false,
contentType:false,
success:function(data){
console.log(data)
if(data.err == 0){
$('img').attr('src',`http://localhost:3000${data.img}`)
}else{
alert('上传失败重试')
}
}
})
}
</script>
