js实现图片上传预览

来源：互联网发布：如何美化java做的界面编辑：程序博客网时间：2024/05/17 07:44

笔试题遇到的，百度了许多资料，但是原地址的给的有问题，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