JavaScript的FormData+Ajax实现文件上传+图片上传

 JavaScript的FormData+Ajax实现文件上传+图片上传

在很多网页开发中会存在文件上传，图片上传的操作，有的使用form表单默认功能提交文件，有的采用Ajax提交

如果采用form表单的提交方式，恰恰又需要添加额外的参数或者需要设置特定的请求头信息，那么这种方式就显得有些单调了

以下采用第二种方式：采用JavaScript+Ajax来实现文件上传

如果希望在选择文件确认的同时使文件上传提交可以采用下面这种方式：

<input type="file" onchange="upload">

function upload(event) {
    // event.target.files 是一个数组
    // 如果需要上传多个文件，此处可以采用for循环
    var file = event.target.files[0];
    
    // 实例化一个FormData对象，便于存储文件对象
    var formData = new FormData();
    formData.append('file', file);
    
    // 调用ajax提交formData实例到服务端
    ajaxSubmit(formData);
}

function ajaxSubmit(data) {
    var xhr = '';
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {
        // 兼容IE浏览器
        xhr = new ActiveXObject('Microsoft.XMLHTTP')
    }
    /**
     * 参数1：传输类型,常用的有POST,GET
     * 参数2：请求地址，服务端接口
     * 参数3：是否采用异步
     */
    xhr.open('POST', 'http://xxx.com/upload', true);
    
    // 设置请求头信息
    xhr.setRequestHeader('cookies','dfhjsdfhsjdksjdfhajk');
    
    // 请求过程监控
    xhr.onreadystatechange = function () {
        // 服务端响应状态判断
        if (xhr.readyState === 4) {
            // 服务端返回的状态码判断
            if (xhr.status === 200) {
                // 服务端返回的数据
                consolo.log(xhr.responseText);
            }
        }
    }
    
    // 发送数据
    xhr.send(data);
}

如果希望在选择文件后不上传文件，由单独提交按钮一次性上传，可以采用下面这种方式：

<input type="file" id="upFile">

<input type="button" value="文件上传" onclick="upload">

function upload() {
    // document.getElementById('upFile').files 是一个数组
    // 如果需要上传多个文件，此处可以采用for循环
    var file = document.getElementById('upFile').files[0];
    
    // 实例化一个FormData对象，便于存储文件对象
    var formData = new FormData();
    formData.append('file', file);
    
    // 调用ajax提交formData实例到服务端
    ajaxSubmit(formData);
}

function ajaxSubmit(data) {
    var xhr = '';
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {
        // 兼容IE浏览器
        xhr = new ActiveXObject('Microsoft.XMLHTTP')
    }
    /**
     * 参数1：传输类型,常用的有POST,GET
     * 参数2：请求地址，服务端接口
     * 参数3：是否采用异步
     */
    xhr.open('POST', 'http://xxx.com/upload', true);
    
    // 设置请求头信息
    xhr.setRequestHeader('cookies','dfhjsdfhsjdksjdfhajk');
    
    // 请求过程监控
    xhr.onreadystatechange = function () {
        // 服务端响应状态判断
        if (xhr.readyState === 4) {
            // 服务端返回的状态码判断
            if (xhr.status === 200) {
                // 服务端返回的数据
                consolo.log(xhr.responseText);
            }
        }
    }
    
    // 发送数据
    xhr.send(data);
}