HTML5+Ajax上传文件

HTML部分

input类型设为file：

<label for="img_input"></label>
<input id="img_input" type="file"/>

如果想上传多文件，可添加multiple

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

用accept="MIME_type"限制提交的文件类型，用逗号隔开的 MIME 类型列表（服务器端也要最好类型检测双保险），如：

<input type="file" accept="image/gif, image/jpeg" />
<input type="file" accept="image/*"/>

获取文件内容

JavaScript：

var file = document.getElementById('fileToUpload').files[0];

jQuery：

var file = $("#img_input").prop("files")[0];

实用案例：

layui.use(['form'], function () {
        let form = layui.form,
            layer = layui.layer,
            $ = layui.$;
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            let field = data.field, form_data = new FormData();
            for (let key in field)  form_data.append(key, field[key])
            form_data.append('video', $("#video_input").prop("files")[0])
            $.ajax({
                type: "POST",
                url: "save",
                dataType : "json",
                processData: false,  // 注意：让jQuery不要处理数据
                contentType: false,  // 注意：让jQuery不要设置contentType
                data: form_data
            }).success(function(res) {
                if (res.status != 1)    return layer.msg(res.msg)
                layer.msg(res.msg, () => {
                    parent.layer.close(parent.layer.getFrameIndex(window.name));
                })
            }).fail(function(msg) {
                console.log(msg);
            });

            return false;
        });

    });

参考文章：

HTML5+Ajax上传文件《https://segmentfault.com/a/1190000004538728》
html ajax 上传文件到服务器,Ajax文件异步上传，Html5实现《https://blog.csdn.net/weixin_29698317/article/details/117876591》

HTML部分

获取文件内容

评论 (0)