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

最新推荐文章于 2024-04-26 15:42:33 发布

eddyhua

最新推荐文章于 2024-04-26 15:42:33 发布

阅读量1k

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog.php?id=hhh111cbb&title=%E5%85%B3%E4%BA%8Ehtml%E4%B8%AD%E5%9B%BE%E7%89%87%E4%B8%8A%E4%BC%A0%E9%A2%84%E8%A7%88%E7%9A%84%E5%AE%9E%E7%8E%B0

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了两种实现本地图片预览的方法。第一种方法通过HTML、JavaScript和文件读取API实现跨浏览器兼容，包括IE和现代浏览器。第二种方法利用HTML5 FileReader API实现图片预览，简洁高效。

摘要由CSDN通过智能技术生成

本地图片预览

第一种方法

<!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;
 
     if(isIE) {
        file.select();
        var reallocalpath = document.selection.createRange().text;
 
        // IE6浏览器设置img的src为本地路径可以直接显示图片
         if (isIE6) {
            pic.src = reallocalpath;
         }else {
            // 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片，但是可以通过滤镜来实现
             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; width: 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>