layUI实现文件上传

一、页面编写

上传文件

上传文件         

    </div>

二、js编写：
var $; var$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;
                })
            })