Layui中的upload使用方法

标准代码

layui.use('upload', function(){
  var upload = layui.upload;
   
  //执行实例
  var uploadInst = upload.render({
    elem: '#test1' //绑定元素
    ,url: '/upload/' //上传接口
    ,done: function(res){
      //上传完毕回调
    }
    ,error: function(){
      //请求异常回调
    }
  });
});

在使用的时候需要注意，upload.render不能对一个元素进行重复render,否则会导致不能进行访问

场景1:

在点击一个图片

弹出一个图片修改的图片框

此时，上传是动态元素，则upload.render是无效的，解决方法如下

            $("body").on("click", ".showProductImage", function() {
                    var me = this;
                    var imgSrc = $(this).attr("src");

                    uploadIndex++;
                    var uploadId = "showImageUpload" + uploadIndex;
                    var imgId = "curImage" + uploadIndex;
                    var htmlContent = $("#imgDialog").html();
                    htmlContent = htmlContent.replace("-uploadIndex-", uploadIndex);
                    htmlContent = htmlContent.replace("-curImage-", imgSrc);
                    htmlContent = htmlContent.replace("-curImageId-", imgId);

                    layer.open({
                        type: 1,
                        title: "图片信息",
                        area: ['80%', '80%'],
                        content: htmlContent,
                        success: function() {
                            upload.render({
                                elem: '#' + uploadId,
                                url: '/manage/upload/DoUploadImageForLayUi',
                                done: function(res) {
                                    //如果上传失败
                                    if (res.code > 0) {
                                        return layer.msg('上传失败');
                                    } else {
                                        if ($($(me).parent()).attr("class") === "spanProductImage") {
                                            $(me).attr("src", res.ServerRelativeFileName);
                                            $($($(me).parent().parent().parent()).find("input[name='DetailImage']")[0]).val(res.ServerRelativeFileName);
                                        } else if ($($(me).parent()).hasClass("sizeandcolor")) {
                                            $(me).attr("src", res.ServerRelativeFileName);
                                            $($($(me).parent()).find("input[name='LaLianSupplierDetailImage']")[0]).val(res.ServerRelativeFileName);
                                        }

                                        $("#"+imgId).attr("src", res.ServerRelativeFileName);
                                    }
                                }
                            });

                            $("body").on("click",
                                ".showImageDelete",
                                function() {
                                    if ($($(me).parent()).attr("class") === "spanProductImage") {
                                        $($($(me).parent().parent().parent()).find("input[name='DetailImage']")[0]).val("#");
                                        $($(me).parent().parent().parent().find("div[class='spanProductImage']")[0]).html("<img class='showProductImage' src='-curImage-' />");

                                       
                                    } else if ($($(me).parent()).hasClass("sizeandcolor")) {
                                        alert("cc");
                                        $($($(me).parent()).find("input[name='LaLianSupplierDetailImage']")[0]).val("-curImage-");
                                        $(me).attr("src", "-curImage-");
                                    }

                                    $("#"+imgId).attr("src", "");
                                });
                        }
                    });


                });