标签搜索

HTML5+Ajax上传文件

小群
2022-02-02 / 0 评论 / 110 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2022年02月02日,已超过982天没有更新,若内容或图片失效,请留言反馈。

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;
        });

    });

参考文章:

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

评论 (0)

取消