关于一个页面只有一个<input [type=“file”]> 的文件上传实现!
对于一个大半年没动前端的后端开发人员来说,能这样实现是真的做啊!!!
首先的页面
- 嗯,博主这个需求是跟 table 表格中的每条数据,做单独的文件上传!!!*
'<dev>
<a class="btn btn-primary" onclick="vm.F_Open_dialog('+feild.terminalproductId+')">
<i' + ' class="fa fa-cloud-upload"></i> 上传安装包
</a>
<input type="file" id="appTerminal_'+feild.terminalproductId+'" ref="appTerminal_'+feild.terminalproductId+'" onchange="vm.onAppPackageBTN('+feild.terminalproductId+','+'this)"' + ' style="display:none">
</dev>';
js 代码块
//让隐藏的<input [type="file"]> 生效
F_Open_dialog: function(id){
document.getElementById("appTerminal_"+id).click();
},
//触发上传onchange方法的function,注意:一个是这样,多个都是放在 [0,1.... ] 数组里面偶
onAppPackageBTN: function(id,z){
var url = baseURL + "single/"+id+";
var data = new FormData();
data.append("file",z.files[0]);
$.ajax({
type: "POST",
url: baseURL + url,
contentType: false,
processData: false,
data: data,
dataType: 'json',
success: function(r){
if(r.code === 0){
layer.msg("操作成功", {icon: 1});
vm.reload();
}else{
layer.alert(r.msg);
}
}
});
vm.reload();
},
嗯,博主做的是一个单体项目,页面用的是jqGrid + Vue + layui做的开发!!! 有问题可以 留言 || 私信 !