webjs--获取上传图片的缓存路径展示在页面上

最新推荐文章于 2025-11-21 09:53:11 发布

转载最新推荐文章于 2025-11-21 09:53:11 发布 · 2.1k 阅读

文章标签：

#图片 #js

webjs 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现的图片上传实时预览功能。该方法利用FileReader API读取用户选择的图片文件，并将其显示在网页上。适用于需要用户即时查看上传图片效果的应用场景。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="ge_pic_icon_Infor">
    <img src="images/moren.jpg"/>
</div>
<div class="Infor_file">
    <input type="file" name="uploadPicture" id="file" value="" title="上传照片" onchange="getPhoto(this)"/>
</div>
<script src="javascript/jquery-1.12.1.js"></script>
<script type="text/javascript">
    var imgurl = "";
    var cd=document.getElementById("file");

    function getPhoto(node) {
        console.dir(node)

        var imgURL = "";
        try{
            var file = null;
            if(node.files && node.files[0] ){
                file = node.files[0];
                console.dir(file);

            }else if(node.files && node.files.item(0)) {
                file = node.files.item(0);

            }
            //Firefox 因安全性问题已无法直接通过input[file].value 获取完整的文件路径
            try{
                imgURL =  file.getAsDataURL();
                console.log(imgURL)

            }catch(e){
                imgRUL = window.URL.createObjectURL(file);  //好像这一步比较重要
                
                
            }
        }catch(e){

            if (node.files && node.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    imgURL = e.target.result;
                };
                reader.readAsDataURL(node.files[0]);
            }
        }
        creatImg(imgRUL);
        return imgURL;
    }

    function creatImg(imgRUL){
        var textHtml = "<img src='"+imgRUL+"'width='414px' height='600px'/>";
        $(".ge_pic_icon_Infor").html(textHtml);
    }
</script>
</body>
</html>