我们使用H5可以很容易的实现图片上传前对其进行预览的功能
Html代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>UploadFile</title> </head> <body> <div> <img src="" id="img" style="200px;height:300px;" /> </div> <input type="file" id="file" /> </body> </html>
实现预览功能的js代码如下：
<script type="text/javascript"> window.onload = function () { var fileTag = document.getElementById('file'); fileTag.onchange = function () { var file = fileTag.files[0]; var fileReader = new FileReader(); fileReader.onloadend = function () { if (fileReader.readyState == fileReader.DONE) { document.getElementById('img').setAttribute('src', fileReader.result); } }; fileReader.readAsDataURL(file); }; }; </script>
预览效果如下：
最后注意一点，H5实现图片预览只能使用原生JS进行DOM元素的操作，若使用jQuery则无法实现该效果。