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)->
입력 개체 반환 :

console.log (e.target.files)-> 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을 포함한 콘텐츠를 데이터베이스에 저장하고 팝업 상자를 닫습니다.