Javascript图片上传预览

最新推荐文章于 2024-10-01 20:12:28 发布

weixian52034

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量554

点赞数 2

分类专栏： web前端 Javascript 文章标签： javascript 图片上传预览 HTML 前端图片

本文链接：https://blog.csdn.net/weixian52034/article/details/52103649

版权

web前端同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

Javascript

1 篇文章 0 订阅

订阅专栏

简单的js图片上传预览例子，支持火狐、Google以及IE9以上版本！

html代码：

<body>
	<div style="margin :0px auto; width:990px;" >

		<input type="file"  name="file" id="images" multiple="multiple"  style="width:400px;" οnchange="javascript:imgPreviews();" accept="image/*" />
		<hr />
		<div id="imgShow" style=" width:90%;"></div>
	</div>
</body>

JavaScript代码：
IE下使用滤镜以及css渲染实现图片的显示

<script type="text/javascript">
    //多图上传预览功能
    function imgPreviews() {
        var imgObj = document.getElementById("images");
        var imgShow = document.getElementById("imgShow");
        var fileList = imgObj.files;
        for (var i = 0; i < fileList.length; i++) {            
            imgShow.innerHTML += "<div style='float:left' > <img id='img" + i + "'  /> </div>";
            var imgShows = document.getElementById("img"+i); 
            if (imgObj.files && imgObj.files[i]) {   <span class="wmd-input-section" id="wmd-input-section-48"><span class="token h2"></span></span>//火狐、谷歌<span class="wmd-input-section" id="wmd-input-section-48"><span class="token h2"></span></span>
                imgShows.style.display = 'block';
                imgShows.style.width = '200px';
                imgShows.style.height = '200px';
                imgShows.src = window.URL.createObjectURL(imgObj.files[i]);
            }
            else {      //IE
                imgObj.select();
                var imgSrc = document.selection.createRange().text; //运用IE滤镜获取数据;
                var locImag = document.getElementById("img" + i);
                //设置图片的初始大小
                locImag.style.width = "200px";
                locImag.style.height = "200px";
                locImag.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader( true,sizingMethod=scale,src = imgSrc)";  //使用IE下的css渲染
                imgShows.style.display = 'none';
            }
        }  
        return true;
    }
</script>