[JavaScript知识库]JQuery 之 ajax上传文件 与 原生ajax 上传文件

原生js创建 input 上传标签

// 打开上传页面时自运行该函数，创建input上传标签
var file;
(function () {
    var input = document.createElement('input');
    input.type = 'file';
    input.id = 'file';
    input.name = 'file';
    input.style.cssText = `
        width: 400px;
        opacity: 0;
        position: absolute;
        top: 20px;
        left: 64px;
    `;
    document.getElementById('fileupload').appendChild(input)
    input.onchange = (e) => {
        file = e.target.files[0];
        console.log('file', file)
    }
})()

??

jquery ajax上传文件

??这个handleUpload 方法可以是 element 绑定的自定义上传方法，如果是element 自定义的上传方法，那么参数就得改变一下；

<el-upload
      class="upload-demo"
      action=""
      :http-request="handleUpload"
      :file-list="fileList"
>
    <el-button size="small" type="primary">点击上传</el-button>
</el-upload>

// function handleUpload(uploadFile) { // 如果是element 自定义的上传方法
function handleUpload(file) {
	let fileDatas = new FormData();
	// fileDatas.append('files', uploadFile.file); // 如果是element 自定义的上传方法
	fileDatas.append('files', file);
	$.ajax({
	    url: "/api/xxx/upload", // 接口地址
	    type: "POST",
	    data: fileDatas,
	    contentType: false, // jquery 上传文件时必须设置：告诉jQuery不要去设置Content-Type请求头
	    processData : false, // jquery 上传文件时必须设置：告诉jQuery不要去处理发送的数据
	    success: res => {
	        console.log('上传成功res', res);
	    }
	})
}

??

原生ajax上传文件

// 确定上传
function handleUpload() {
    let formData = new FormData();
    formData.append("file", file);
    let xhr = new XMLHttpRequest();
    xhr.open("POST", "/api/xxx/upload", true);
    xhr.ontimeout = function() {
        // xhr请求超时事件处理
        alert("请求超时");
    };
    xhr.onreadystatechange = () => {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                const res = JSON.parse(xhr.responseText);
                console.log('上传成功', res)
                if(res.state == 'success') {
                    alert("上传成功");
                } else {
                    alert(res.message);
                }
            } else {
                alert("上传失败");
            }
        }
    };
    xhr.send(formData);
}

??
??
??
如有不足，望大家多多指点！ 谢谢！