码迷,mamicode.com
首页 > Web开发 > 详细

一个上传图片,预览图片的小demo

时间:2017-09-13 15:23:58      阅读:210      评论:0      收藏:0      [点我收藏+]

标签:上传   需求   res   user   支持   his   asd   use   获取路径   

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>3</title>  
<script>  
function getFullPath(obj) {  
    if (obj) {  
        //Internet Explorer   
        if (window.navigator.userAgent.indexOf("MSIE") >= 1) {  
            obj.select();  
            return document.selection.createRange().text;  
        }   
        //Firefox  
        if (window.navigator.userAgent.indexOf("Firefox") >= 1) {  
            if (obj.files) {  
                return obj.files.item(0).getAsDataURL();  
            }  
            return obj.value;  
        }   
  
        //兼容chrome、火狐等,HTML5获取路径         
        if (typeof FileReader != "undefined") {  
            var reader = new FileReader();  
            reader.onload = function(e) {  
                document.getElementById("pic").src = e.target.result + "";   
            }  
            reader.readAsDataURL(obj.files[0]);  
        } else if (browserVersion.indexOf("SAFARI") > -1) {  
            alert("暂时不支持Safari浏览器!");  
        }  
  
    }   
}  
  
function showPic(obj) {  
    var fullPath = getFullPath(obj);  
    if (fullPath) {  
        document.getElementById("pic").src = fullPath + "";  
    }  
}  
</script>  
</head>  
<body>  
    <input type="file" onchange="showPic(this)">  
    <img src="" id="pic">  
</body>  
</html> 

由于工作需要,自己写了个小demo,通过自己组装,可以实现一定的需求。

一个上传图片,预览图片的小demo

标签:上传   需求   res   user   支持   his   asd   use   获取路径   

原文地址:http://www.cnblogs.com/pongyc/p/7514561.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!