基于layer上传查看图片

最新推荐文章于 2024-08-15 11:02:18 发布

风中骚年

最新推荐文章于 2024-08-15 11:02:18 发布

阅读量5.9k

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/qq50521/article/details/73883906

版权

Javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

首先要引入layer.js 和layer.css. 可查看layerApi

html结构：

 <td id="layer-photos-demo" class="layer-photos-demo">
      	<input type="file" name="invoice_img" required="required" class="hidden" value=""id="images"/>
               <a href="javascript:void(0);" class="file_img">点击上传</a>
               <a href="javascript:void(0);" class="img_look fr">预览</a>
               <img src="http://desk.fd.zol-img.com.cn/t_s960x600c5/g5/M00/01/0E/ChMkJlbKwaOIN8zJAAs5DadIS-IAALGbQPo5ngACzkl365.jpg"
            	layer-src="http://desk.fd.zol-img.com.cn/t_s960x600c5/g5/M00/01/0E/ChMkJlbKwaOIN8zJAAs5DadIS-IAALGbQPo5ngACzkl365.jpg"
            	class="img1 fr hidden" alt="">
</td>

js:部分

$('.file_img').on('click', function (e) {
	e.preventDefault();
	$('#images').trigger('click');
})
$('#images').on("change",function(){
$('.file_img').html('已上传');
var srcs = getObjectURL(this.files[0]);
$('.img1').attr("src",srcs).attr('layer-src',srcs);
$('.img_look').hide().next('.img1').show();
layui.use('layer', function(){
		var $ = layui.jquery
		,layer = layui.layer;
		layer.photos({
			photos: '#layer-photos-demo',
			anim: 1
			});

		});
	})
function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) {
            url = window.createObjectURL(file)
        } else if (window.URL != undefined) {
            url = window.URL.createObjectURL(file)
        } else if (window.webkitURL != undefined) {
            url = window.webkitURL.createObjectURL(file)
        }
        return url
    }