javascript 实现图片预览（未上传到服务器端）

最新推荐文章于 2021-04-10 11:31:58 发布

yReal

最新推荐文章于 2021-04-10 11:31:58 发布

阅读量644

点赞数

分类专栏： JavaScript HTML 文章标签： javascript 图片预览

本文链接：https://blog.csdn.net/e_real/article/details/39694543

版权

JavaScript 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

HTML

1 篇文章 0 订阅

订阅专栏

1，图片预览

越来越多的浏览器为了安全，都不能获得文件的,全路径，实现图片预览实现起来有点麻烦。有人选择复制图片到服务器的某个路径下，然后从服务器端找到路径，实现预览。但这不是最佳实现方案，如果用户一张一张的预览图片，最终服务器里的垃圾图片岂不泛滥了？

2，代码（以下代码兼容主流浏览器，请放心使用）

<!DOCTYPE html>
<html>
<head>
<title>图片预览</title>
     
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
#main {
    width: 900px;
    height: 600px;
    margin: 10px auto 0;
}
 
#preview_text {
    width: 900px;
    height: 40px;
}
 
#preview_wrapper{
    width: 900px;
    height: 500px;
    border: 1px solid gray;
}
</style>
<script type="text/javascript">
var DIV_ID = "preview";// div
var PREVIEW_ID = "preview_wrapper";
 
var PIC_WIDTH = 900;// 展示图片的宽度
var PIC_HEIGHT = 500;// 展示图片的高度
var FILE_NAME = "fileName";
var IMAGE_FILE = "imageFile";
 
 
function $$(id){// 为了方便起见，统一定义一个函数
    return document.getElementById(id);
}
 
function toShowPic(){
    doPreview();
    setImageName();
}
 
// 设置图片名称
function setImageName(){
    var name = $$(IMAGE_FILE).value;
    $$(FILE_NAME).value = name.substring(name.lastIndexOf('\\')+1,name.lastIndexOf("."));
}
 
    // 预览
function doPreview(){  
    var sender = $$(IMAGE_FILE);
    var allowExtention = ".jpg,.bmp,.gif,.png";// 图片支持的格式
    var extention = sender.value.substring(sender.value.lastIndexOf(".") + 1).toLowerCase();// 文件的扩展名
    var browserVersion = window.navigator.userAgent.toUpperCase();// 浏览器版本
     
    if(allowExtention.indexOf(extention)!=-1){// 包含指定的几种文件类型
        if (browserVersion.indexOf("MSIE") > -1) {// IE 浏览器
            if (browserVersion.indexOf("MSIE 6.0") > -1) {// ie6
                $$(DIV_ID).setAttribute("src",sender.value);
            } else {// ie[7-8]、ie9
                sender.select();
                var newPreview = $$(PREVIEW_ID+ "New");
                if (newPreview == null) {
                    newPreview = document.createElement("div");
                    newPreview.setAttribute("id", PREVIEW_ID + "New");
                    newPreview.style.width = PIC_WIDTH;
                    newPreview.style.height = PIC_HEIGHT;
                    newPreview.style.border = "solid 1px gray";
                }
                newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='"+ document.selection.createRange().text + "')";
                var tempDivPreview = $$(PREVIEW_ID);
                     
                tempDivPreview.parentNode.insertBefore(newPreview,tempDivPreview);
                tempDivPreview.style.display = "none";
            }
        }else if (browserVersion.indexOf("FIREFOX") > -1) {// 火狐浏览器
            var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
                         
            if (firefoxVersion < 7) {// firefox7以下版本
                $$(PREVIEW_ID).setAttribute("src",sender.files[0].getAsDataURL());
            } else {//firefox7.0+    
                $$(DIV_ID).setAttribute("src",window.URL.createObjectURL(sender.files[0]));
            }
        }else if (sender.files) {
            //兼容chrome、火狐等，HTML5获取路径       
            if (typeof FileReader != "undefined") {
                var reader = new FileReader();
                 
                reader.onload = function(e) {
                    $$(DIV_ID).setAttribute("src", e.target.result);
                    $$(DIV_ID).setAttribute("width", PIC_WIDTH);
                    $$(DIV_ID).setAttribute("height", PIC_HEIGHT);
                };
                reader.readAsDataURL(sender.files[0]);
            } else if (browserVersion.indexOf("SAFARI") > -1) {
                alert("暂时不支持Safari浏览器!");
            }
        }else {
            $$(PREVIEW_ID).setAttribute("src",sender.value);
        }  
    }else{
        sender.value = ""; // 清空选中文件
        $$(FILE_NAME).value="";
        alert("仅支持以"+allowExtention+"为后缀的文件!");
        if (browserVersion.indexOf("MSIE") > -1) {// IE浏览器
             sender.select();
             document.selection.clear();
        }
        sender.outerHTML = sender.outerHTML;
    }
}
 
</script>
 
</head>
   
<body>
<div id="main">
 
    <div id="preview_text" class="preview_text">
        选择文件 : <input type="file" name="imageFile" id="imageFile" onChange="toShowPic()"/>
        文件名 : <input type="text" name="fileName" id="fileName" value=""/>
    </div>
     
    <div id="preview_wrapper">
        <img id="preview" src="image/blank.gif" /><br/><!-- 图片占位符 -->
    </div>
</div>
</body>
</html>

3，示例图

yReal

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript 实现图片预览（未上传到服务器端）

1，图片预览越来越多的浏览器为了安全，都不能获得文件的,全路径，实现图片预览实现起来有点麻烦。有人选择复制图片到服务器的某个路径下，然后从服务器端找到路径，实现预览。但这不是最佳实现方案，如果用户一张一张的预览图片，最终服务器里的垃圾图片岂不泛滥了？2，代码（以下代码兼容主流浏览器，请放心使用）
复制链接

扫一扫