上传图片小图预览

最新推荐文章于 2022-09-20 16:13:06 发布

baibai_-

最新推荐文章于 2022-09-20 16:13:06 发布

阅读量177

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_42952532/article/details/88666131

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

需要引入bootstrap和js

<body>

<div id="pic_info">
<input type="file" name="file0" id="file0" multiple="multiple" onchange="uploadImg()" /><br>
<img src="mo_ren.jpg" id="img0" style="width: 100px;height: 100px;" onclick="showMaxImg(this)">
</div>

<div class="modal fade bs-example-modal-lg text-center" id="imgModal" tabindex="-1" role="dialog" data-toggle="modal" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" style="display:inline-block;width:auto;">
       <div class="modal-content">
           <div id="imgshow"></div>
       </div>
   </div>
</div>


<script type="text/javascript">
    function showMaxImg(obj){
        var src=$(obj).attr("src");
        $("#imgModal").find("#imgshow").html("<img src='"+src+"' class='carousel-inner img-responsive img-rounded' data-dismiss='modal'>");
        $("#imgModal").modal('show');
    }

    // 图片上传 小图预览
        $("#file0").change(function(){
		 var objUrl = getObjectURL(this.files[0]) ;//获取文件信息
		 console.log("objUrl = "+objUrl);
		  if (objUrl) {
		  $("#img0").attr("src", objUrl);
		 }
}) ;
function getObjectURL(file) {
		 var url = null;
		 if (window.createObjectURL!=undefined) {
		  url = window.createObjectURL(file) ;
		 } else if (window.URL!=undefined) { // mozilla(firefox)
		  url = window.URL.createObjectURL(file) ;
		 } else if (window.webkitURL!=undefined) { // webkit or chrome
		  url = window.webkitURL.createObjectURL(file) ;
		 }
		 return url ;
		}

		function uploadImg() {
        var _name , _fileName, personsFile;
        personsFile = document.getElementById('file0');
        _name = personsFile.value;
        _fileName = _name.substring(_name.lastIndexOf('.') + 1).toLowerCase();
        if(_fileName !== 'png' && _fileName !== 'jpg' && _fileName !== 'jpeg'){
            alert('请检查图片格式，支持jpg、png、jpeg的图片格式上传');
        }

    }
</script>
</body>

baibai_-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
上传图片小图预览

需要引入bootstrap和js<body><div id="pic_info"><input type="file" name="file0" id="file0" multiple="multiple" onchange="uploadImg()" /><br><img src="mo_ren.jpg" id="img0" sty...
复制链接

扫一扫