layUI实现文件上传
一、页面编写
上传文件
上传文件
二、js编写：
var ;var ; v a r form;
var form;
var filename;
var filepath;
layui
.config({
base : “js/”
})
.use(
[ ‘form’, ‘layer’, ‘jquery’, ‘laypage’, ‘laydate’, ‘element’,
‘layedit’ ],
function() {
var layer = parent.layer === undefined ? layui.layer
: parent.layer, layedit = layui.layedit, laypage = layui.laypage, laydate = layui.laydate, element = layui.element, laydate = layui.laydate, $ = layui.jquery;
form = layui.form;
// 上传文件
layui.use('upload', function() {
var upload = layui.upload;
// 执行实例
var uploadInst = upload.render({
elem : '#test1' // 绑定元素
,
url : ctx + '/pic/upload' // 上传接口
,
accept : 'file' // 允许上传的文件类型
,
size : 500000 // 最大允许上传的文件大小
,
done : function(res, index, upload) {
filename = res.data.title;
filepath = res.data.src;
$("#spanid").html(filename)
// 上传完毕回调
},
error : function() {
// 请求异常回调
}
});
});
form.on("submit(addFile)", function(data) {
// 弹出loading
var index = top.layer.msg('数据提交中，请稍候', {
icon : 16,
time : false,
shade : 0.8
});
var msg, flag = false;
var content = layedit.getContent(index);// 获得附件富文本内容
$.ajax({
type : "post",
url : ctx + "/product/insFile",
async : false,
data : {
"filePath" : filepath,
"fileName" : filename,
"productId" : $("#productId").val(),
"isLoad" : $("#isLoads ").val()
},
dataType : "json",
success : function(d) {
if (d.code == 0) {
msg = "文件上传成功！";
flag = true;
$("#auf")[0].reset();
} else {
msg = d.msg;
}
}
});
setTimeout(function() {
top.layer.close(index);
top.layer.msg(msg);
layer.closeAll("iframe");
// 刷新父页面
parent.location.reload();
}, 2000);
return false;
})
})