这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了多种方式实现 js 图片预览, 具有一定的参考价值,感兴趣的小伙伴们可以参考一下
先贴代码,之后完善:
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="Generator" content="EditPlus®">
- <meta name="Author" content="">
- <meta name="Keywords" content="">
- <meta name="Description" content="">
- <title>
- js多种方式图片预览-持续更新
- </title>
- </head>
- <body>
- <body>
- <input type="file" id="file" value="选择" accept="image/*">
- <div style="width:300px;height:300px;border:1px solid #ccc">
- <img id="img_show" src="" />
- </div>
- </body>
- <script type="text/javascript" src="./jquery-3.1.1.min.js">
- </script>
- <script type="text/javascript">
- //设置自己的变量存储区
- var Util = {
- file: $("#file"),
- image_show: $("#img_show")
- }
- Util.file.onchange = function(f) {
- if (this.files[0].type.indexOf('image') < 0) {
- alert("请选择图片文件!");
- return;
- }
- if (this.files[0].size / 1024 > 5 * 1024) {
- alert("图片过大,请选择5M以下的文件");
- return;
- }
- if (typeof FileReader == 'undefined') { //如果支持,typeOf返回的也是 Function
- alert("您的浏览器不支持html5 fileReader请更换浏览器重试!");
- return;
- }
- var reader = new FileReader();
- reader.readAsDataURL(this.files[0]); //这里传的是一个blob ,其实file对象就是继承自bolob
- reader.onload = function(e) {
- console.log(reader.result); //这里拿到的是一个base64编码后的图片
- Util.image_show.src = reader.result;
- }
- };
- </script>
- </html>
来源: http://www.phperz.com/article/17/0516/329667.html