这篇文章主要介绍了 JS 上传图片前实现图片预览效果的方法, 涉及 javascript 操作图片的技巧, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 JS 上传图片前实现图片预览效果的方法。分享给大家供大家参考。具体实现方法如下:
- <!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- JS上传图片前的图片预览效果
- </title>
- </head>
- <body>
- <input id="myfile" type="file" />
- <br />
- <img src="/images/logo.gif" 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();
- } else if (dFile.value.indexOf('\\') > -1 || dFile.value.indexOf('\/') > -1) { dImg.src = dFile.value;
- }
- }
- </script>
- </body>
- </html>
希望本文所述对大家的 javascript 程序设计有所帮助。
来源: