js实现图片上传预览

最新推荐文章于 2024-04-18 00:52:22 发布

见面时的呼吸都曾反复练习

最新推荐文章于 2024-04-18 00:52:22 发布

阅读量393

点赞数

分类专栏： JavaScript积跬步至千里文章标签： js图片上传

JavaScript积跬步至千里专栏收录该内容

39 篇文章 0 订阅

订阅专栏

笔试题遇到的，百度了许多资料，但是原地址的给的有问题，window.URL.createObjectURL(dFile.files[0]);

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

    <title>JS上传图片前的图片预览效果</title>
</head>
<body>
    <input id="myfile" type="file" />
    <br />
    <img src="img/01.jpg" alt="Image to be upload." />
    <div id="info"></div>
    <script type="text/javascript">
        var dFile = document.getElementById('myfile');
        var dImg = document.getElementsByTagName('img')[0];
        var dInfo = document.getElementById('info');
        dFile.onchange = function(){
            if(!dFile.value.match(/.jpg|.gif|.png|.bmp/i)){alert('File type must be: .jpg, .gif, .bmp or .png !');return;}
            if(dFile.files){
                // dImg.src = dFile.files[0].getAsDataURL();  ff不支持啦
                dImg.src = window.URL.createObjectURL(dFile.files[0]);
            }else if(dFile.value.indexOf('') > -1 || dFile.value.indexOf('/') > -1){
                dImg.src = dFile.value;
            }
            console.log(dFile.value)
        }
    </script>
</body>
</html>

见面时的呼吸都曾反复练习

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现图片上传预览

笔试题遇到的，百度了许多资料，但是原地址的给的有问题，window.URL.createObjectURL(dFile.files[0]);<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"> <title>JS上传图片前的图片预览效果</title></head><body> <input id="myfil
复制链接

扫一扫

专栏目录