<!-- ajax上传文件 -->
    <h1>ajax上传文件</h1>
    <form action="/imgUpload" method="post" enctype="multipart/form-data">
        <input type="file" name="imgfile" id="imgInput">
        <div id="sBtn">上传</div>
    </form>
    <div>
        <h3>预览图片</h3>
        <img id="yulan" src="">
    </div>

    <script src="/javascripts/jquery-3.6.0.min.js"></script>
    <script>
        let formDataObj = new FormData();
        $('#imgInput').change(function(e) {
   
            let file = this.files[0]
            //预览图片
            //创建预览图片地址
            let httpUrl = window.webkitURL.createObjectURL(file)
            $("#yulan").attr("src",httpUrl)
            //创建formData对象，将文件追加到formData对象里
            formDataObj.append("imgfile",file)
        })
        $('#sBtn').click(function() {
   
            $.ajax({
   
                url: "/imgUpload",
                method: "POST",
                data: formDataObj,
                processData: false,
                contentType: false
            }).then((res) => {
   
                console.log(res)
                $('body').append("<h1>上传成功</h1><img src= " + res.imgUrl + " >")
            })
        })
    </script>