layui图片上传
<!--图片上传控件
-->
<div class="layui-upload">
<button type="button" class="layui-btn" name="payment_url" id="alipay_btn">上传截图</button>
<div class="layui-upload-list layui-upload-list-plus" id="alipay_photo">
<ul class="multifyBox">
</ul>
<!--<p id="uploadText_zs"></p>-->
</div>
</div>
<!--
end图片上传
-->
//js控制控件上传
<script type="text/javascript">
/*
lauyi 文件上传的详细用法：https://www.layui.com/doc/modules/upload.html
*/
layui.use('upload', function(){
var $ = layui.jquery
,upload = layui.upload;
/*
* 支付宝-转账截图/记录,可上传多张
* */
var aliPay=upload.render({
elem: '#alipay_btn'
,url: '/order/imageUpload' //改成您自己的上传接口
,multiple: true
,choose: function(obj){
var files = obj.pushFile();
//预读本地文件示例，不支持ie8
obj.preview(function(index, file, result){
console.log(index); //得到文件索引
console.log(file);
$('#alipay_photo').show().find('.multifyBox').append(
'<li class="mlist'+index+'">'
+ '<i id="removePimg'+index+'" class="removePimg"></i>'
+ '<img id="layui-uploadimg'+index+'" src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">'
+'</li>'
)
// 删除图片
$("#removePimg"+index).on("click", function(event){
var _that=$(this);
//_that.next('.layui-upload-img').attr('src','')
// _that.parent().remove();
delete files;
$(".mlist"+index).remove();
});
//某图片放大预览
$("#layui-uploadimg"+index).on('click',function () {
var width = $("#layui-uploadimg"+index).width();
var height = $("#layui-uploadimg"+index).height();
var scaleWH = width/height;
var bigH = 600;
var bigW = scaleWH*bigH;
if(bigW>900){
bigW = 900;
bigH = bigW/scaleWH;
}
// 放大预览图片
layer.open({
type: 1,
title: false,
closeBtn: 1,
shadeClose: true,
area: , //宽高
content: "<img class='ngsPic' width='"+bigW+"' height='"+bigH+"' src=" + result + " />"
});
});
});
}
,done: function(res){
//如果上传失败
if(res.code > 0){
return layer.msg('上传失败');
}
//得到上传后的url
imageUrl=res.data.url;
//console.log(res.data);
//上传完毕
console.log('上传完毕')
}
});
})
</script>
页:
[1]