美文网首页
ajax调用接口图片上传功能

ajax调用接口图片上传功能

作者: 五四青年_4e7d | 来源:发表于2020-03-15 21:44 被阅读0次
<!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>

相关文章

网友评论

      本文标题:ajax调用接口图片上传功能

      本文链接:https://www.haomeiwen.com/subject/ycfiehtx.html