关于html中图片上传预览的实现

本地图片预览

第一种方法

<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<script type="text/javascript">
function change() {
    var pic = document.getElementById("preview"),
        file = document.getElementById("f");
    //得到后缀名
    var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();
     // gif在IE浏览器暂时无法显示
     if(ext!='png'&&ext!='jpg'&&ext!='jpeg'){
         alert("图片的格式必须为png或者jpg或者jpeg格式！"); 
         return;
     }
     var isIE = navigator.userAgent.match(/MSIE/)!= null,
         isIE6 = navigator.userAgent.match(/MSIE 6.0/)!= null;
 </span><span style="background-color: #f5f5f5; color: #0000ff;">if</span><span style="background-color: #f5f5f5; color: #000000;">(isIE) {
    file.select();
    </span><span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> reallocalpath </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> document.selection.createRange().text;

    </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;"> IE6浏览器设置img的src为本地路径可以直接显示图片</span>
     <span style="background-color: #f5f5f5; color: #0000ff;">if</span><span style="background-color: #f5f5f5; color: #000000;"> (isIE6) {
        pic.src </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> reallocalpath;
     }</span><span style="background-color: #f5f5f5; color: #0000ff;">else</span><span style="background-color: #f5f5f5; color: #000000;"> {
        </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;"> 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片，但是可以通过滤镜来实现</span>

             pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src="" + reallocalpath + "")";

// 设置img的src为base64编码的透明图片 取消显示浏览器默认图片

             pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';

}

}else {

html5Reader(file);

}

}
function html5Reader(file){

var file = file.files[0];

var reader = new FileReader();

reader.readAsDataURL(file);

reader.onload = function(e){

var pic = document.getElementById("preview");

pic.src=this.result;

}

}
</script>

</head>

<body>

<form action="">

<input type="file" multiple id="f" type="file" name="f" onchange="change()" >

<img id="preview" alt="" src="" name="pic" class="file_img" style="margin-top: 5px;margin-left: 12px;  158px; height: 230px;"/>

</form>

</body>

</html>

第二种方法

<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<script type="text/javascript">
function previewFile() {
 var preview = document.querySelector('img');
 var file  = document.querySelector('input[type=file]').files[0];
 var reader = new FileReader();
 reader.onloadend = function () {
  preview.src = reader.result;
 }
 if (file) {
  reader.readAsDataURL(file);
 } else {
  preview.src = "";
 }
}
</script>
</head>
<body>
    <input type="file" onchange="previewFile()"><br>
    <img src="" height="200" width="300" alt="Image preview..."/>
</body>
</html>

原文：https://www.cnblogs.com/learnapi/p/7562176.html

相关阅读:
用getBoundingClientRect()来获取页面元素的位置
 asp.net 发送邮件
 MVC5笔记【一】
WEB前端组件思想【日历】
WEB前端组件思想【分页】
【转】前端进阶之路：如何高质量完成产品需求开发
 KindeEditor图片上传插件用法
 jQuery Post 提交内容中有标签报错
 【转发】彻底理解 JS 中 this 的指向
 chrome扩展程序开发之在目标页面运行自己的JS
原文地址：https://www.cnblogs.com/showcase/p/12930299.html