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

对于强迫症的我，现在想在一个表格数据中对某一行数据的头像信息进行修改，一般来说，文件上传操作就是，先选择文件，然后点击上传，但是在表格中，想了很久都是觉得如果这样做的话表格显得异常难看，单独弹出一个框用来进行文件选择然后点击按钮上传又显得有些单调。
为了使页面尽量美观，于是想直接通过单击按钮弹出文件选择框，选择文件后自动进行上传，如下图所示：
![example-upload.png][1]
单击上图中的更换头像，弹出文件选择框选择文件后立即上传。
方法通过网上搜索得来：
**本质还是要借助一个隐藏的`file`类型的`input`，单击按钮时触发该`input`的`click`事件，此时就能弹出文件选择框了，但是还要做到选中文件后自动进行上传，通过监听该`input`的`onchange`事件即可。**
实现代码如下：
html 页面：
```html
<input type="file" id="fileupload" name="file" onchange="upload()" style="display:none" accept=".png,.jpg,.jpeg,image/png,image/jpg,image/jpeg">
```
javascript 代码：
```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`插件。

[1]: https://0o0.me/usr/uploads/2018/11/44655230.png

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

发表评论：