2018-03-15---layer插件上传图片

/**

* 图片上传

* id:上传动作的ID

* imgid: 图片显示的image的ID

* value: 值

* */

var sendImg=function(id,imgid,value){

layui.use('upload',function(){

var $ =layui.jquery,

upload =layui.upload;

//普通图片上传

        var uploadInst =upload.render({

elem: id,

url:'/modules/upload',//必填项

            method:'post',//可选项。HTTP类型,默认post

            exts:'jpg|png|gif|bmp|jpeg',//图片的文件格式

            size:2000,//设置文件最大可允许上传的大小,单位 KB,不支持ie8/9

            drag:true,//是否接受拖拽的文件上传,设置 false 可禁用。不支持ie8/9

            before:function(obj){

layer.load();//上传loading

                //预读本地文件示例,不支持ie8

                obj.preview(function(index, file, result){

// console.log(result)

                });

},

done:function(res, index, upload){

layer.closeAll('loading');//关闭loading

                //res.status == 200代表上传成功

                if(res.status ==200){

$(imgid).attr('src', res.data.imgUrl);//图片链接(base64)

                    $(imgid).attr('mySrc', res.data.url);

// $("input[name=value]").val(res.data.url)

                    //do something (比如将res返回的图片链接保存到表单的隐藏域)

                }

//获取当前触发上传的元素,一般用于 elem 绑定 class 的情况,注意:此乃 layui 2.1.0 新增

                var item =this.item;

},

error:function(){

//演示失败状态,并实现重传

                layer.closeAll('loading');//关闭loading

                var demoText =$("上传失败 重试");

demoText.find('.demo-reload').on('click',function(){

uploadInst.upload();

});

}

})

})

};



在业务js里面调用//上传图片 sendImg('#logImges','#logImges');
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容