最近写的项目有这个需求,给用户上传图片或视频,因为前端框架用的是layui,所以上传也就直接用了框架的 upload 组件,但使用的时候才发现不符合自己的需求。

使用layui Upload 组件上传时,发送多个文件,就会发送多个HTTP请求,而不是一次性发送,这就……
还有就是动态生成的选择文件按钮, 在upload.render方法之后会失效。

然后就直接自己写了。

html input:

<input type="file" name="file" multiple>

// multiple 属性是开启批量选择文件

javascript:

//取得 files
let files = $('input[name=file]').files;

//创建一个 FormData 对象
let fileForm = new FormData();

for (let i=0; i<files.length; i++) {
    
    //第一个参数是http请求参数的Key字段,这里要记得加上[], 不然后端只能获取到一个文件(最后选择的那个)
    fileForm.append('file[]', files[i]);
}

$.ajax({
    url: 'http://',           // 请求地址
    cache: false,       // 不需要缓存
    contentType: false, // !!! 这个很重要,让jQuery自动设置
    processData: false, // !!! 这个也一样重要,不需要自动转换
    data: fileForm,     // new FormData() 对象
    dataType: 'json',   // 期盼后端返回的数据类型,如果后端返回的数据类型跟这里不一致,将触发 error : function()
    type: 'post',       // 请求方式
    timeout: 30000,     // 超时毫秒
    success: function (res) {
        console.log(res)
    },
    error: function (xhr, status, error) {
        console.log('上传时失败');
        console.log('状态: ' + status);
        console.log('错误信息: ' + error);
    }
});

Snipaste_2020-12-14_18-38-26.png
Snipaste_2020-12-14_18-37-51.png

通过上方几行简单的代码,就完成了从 input 元素获取选择的文件,然后再通过一个http请求发送多个文件数据

后端怎么接收数据?

PHP:

// $_FILES的第一个参数就是你在前端写JavaScript fileForm.append('file[]') 方法时第一个参数的名称,这里不需要 []
$file = $_FILES['file'];
Vultr, 注册就送100$, 价格实惠, 服务器节点多多
最后修改:2020 年 12 月 18 日 03 : 04 PM
如果觉得我的文章对你有用,请随意赞赏