formData+Ajax实现单张图片上传

使用Formdata和Ajax实现图片上传

描述：
将单张图片上传到接口后返回URL后写入到数据库中

<input type="file" name="file" id="file" class="file">
<input type="text" name="url" id="url" class="url" value="" style="display: none;">
//设置隐藏文本框用来存储返回的url

了解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)返回==>

console.log(e.target) -->
返回input对象：

console.log(e.target.files)–>
返回一个filelist

里面的一些属性可以通过e.target.files[0].size方式获取

通过ajax可以获取接口返回的url，将这个url写入隐藏的文本域中。在通过ajax方式将url存储至数据库。

$('#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");
    })

点击按钮保存内容包括url至数据库，同时关闭弹出框。