admin

单击按钮直接进行文件上传实现
对于强迫症的我,现在想在一个表格数据中对某一行数据的头像信息进行修改,一般来说,文件上传操作就是,先选择文件,然后...
扫描右侧二维码阅读全文
06
2018/11

单击按钮直接进行文件上传实现

对于强迫症的我,现在想在一个表格数据中对某一行数据的头像信息进行修改,一般来说,文件上传操作就是,先选择文件,然后点击上传,但是在表格中,想了很久都是觉得如果这样做的话表格显得异常难看,单独弹出一个框用来进行文件选择然后点击按钮上传又显得有些单调。
为了使页面尽量美观,于是想直接通过单击按钮弹出文件选择框,选择文件后自动进行上传,如下图所示:
example-upload.png
单击上图中的更换头像,弹出文件选择框选择文件后立即上传。
方法通过网上搜索得来:
本质还是要借助一个隐藏的file类型的input,单击按钮时触发该inputclick事件,此时就能弹出文件选择框了,但是还要做到选中文件后自动进行上传,通过监听该inputonchange事件即可。
实现代码如下:
html 页面:

<input type="file" id="fileupload" name="file" onchange="upload()" style="display:none" accept=".png,.jpg,.jpeg,image/png,image/jpg,image/jpeg">

javascript 代码:

layui.use('table', function() {
    var table = layui.table;
    table1 = table.render(option);
    table.on('tool(ace-content)', function (obj) { //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"
        var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)

        if (layEvent === 'clear') { //删除
            layer.confirm('真的清除么', function (index) {
                clearAce(obj);
                layer.close(index);
            });
        } else if (layEvent === 'updatePhoto') { //修改头像
            vehicle = obj;
            $('#fileupload').click();   //弹出文件选择框
        }
    });
    table.on('edit(ace-content)', function (obj) {
        updateAce(obj.data);
    });
});
//onchange 触发文件上传
function upload() {
    if ($('#fileupload').val() != '') {
        $.ajaxFileUpload({
            type: "POST",
            url: ctx + '/resourcesManage/aceManage/updatePhoto.do?vehicleId=' + vehicle.data.vehicle_id,
            fileElementId: "fileupload",
            dataType: 'json',
            success: function (res) {
                if (res.status == 200) {
                    vehicle.update({acePhoto: ('<a href="' + res.acePhoto + '" target="_blank">' + res.acePhoto + '</a>')});
                }
                layer.msg(res.msg);
            },
            error: function (data) {// 服务器响应失败处理函数
                layer.msg("服务器错误!");
            }
        });
    }
}

上面的文件上传用到的是ajaxfileupload插件。

Last modification:November 6th, 2018 at 03:45 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment