<!DOCTYPE html>

<html>

	<head>

		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

		<style type="text/css">

			#preview,

			.img,

			img {

				width: 200px;

				height: 200px;

			}

			#preview {

				border: 1px solid #000;

			}

		</style>

	</head>

	<body>

		<div id="preview"></div>

		<input type="file" onchange="preview(this)" />

		<script type="text/javascript">

			function preview(file) {

				var prevDiv = document.getElementById('preview');

				if(file.files && file.files[0]) {

					var reader = new FileReader();

					reader.onload = function(evt) {

						prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';

					}

					reader.readAsDataURL(file.files[0]);

				} else {

					prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';

				}

			}

		</script>

	</body>

</html>

js实现图片上传预览功能,使用base64编码来实现的更多相关文章

  1. js实现图片上传预览功能，使用base64编码来实现

    实现图片上传的方法有很多,这里我们介绍比较简单的一种,使用base64对图片信息进行编码,然后直接将图片的base64信息存到数据库. 但是对于系统中需要上传的图片较多时并不建议采用这种方式,我们一般 ...

  2. js实现图片上传预览及进度条

    原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...

  3. 移动端 js 实现图片上传 预览

    方法一: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&q ...

  4. [前端 4] 使用Js实现图片上传预览

    导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...

  5. JQ实现图片上传预览功能

    <input type="file" name="img" id="test1"> <img src="&quo ...

  6. JavaScript实现本地图片上传预览功能（兼容IE、chrome、FF）

    需要解决的问题有:本地图片如何在上传前预览.编辑:最近发现这个功能很多是基于flash实现的,很多JavaScript实现的代码兼容性都很差,特别是在IE和firefox和chrome三个浏览器上不兼 ...

  7. JS实现图片上传预览效果：方法一

    <script type="text/javascript"> //处理file input加载的图片文件 $(document).ready(function(e) ...

  8. HTML+Jquery实现多图片上传预览功能

    HTML:使用input的onchange事件,它一改变就触发事件 <p id="p3"> <input name="File" onchan ...

  9. 使用ajax，结合jquery,php实现图片上传预览功能

    大致逻辑:点击页面的file,上传图片到指定的php处理图片的文件,处理完成以后,将图片的连接地址返回,JS控制返回的数据,然后将图片动态的展示出来html代码<label> <im ...

随机推荐

  1. Git的基本设置

    进入虚拟机环境中:首先我们对 Git 进行用户名和邮箱进行设置,请参照下面格式,替换为你自己常用的用户名和邮箱来完成设置: $ git config --global user.name " ...

  2. T2: 一种能累积计算积分的EC2实例类型

    假设您打算在AWS云端执行一个小型的 Web Server,或是一个小型的数据库,平时并没有大量的工作负载.在绝大多数时间里,您的实例并不须要消耗大量的CPU资源.可是,再不怎么受欢迎的博客也可能会有 ...

  3. Visual Studio 2013 与 14

    Visual Studio 2013 与 14 假设有曾经版本号的 Visual Studio.再想安装 Visual Studio 14 CTP,默认情况下是不行的. 假设一定要装,当然也是能够的. ...

  4. iOS快速打企业包ipa

    简 首页 专题 发钱啦 注册 登录 简首页专题下载手机应用 gege 2016.01.19 16:55 写了24604字,被92人关注,获得了152个喜欢 iOS快速打企业包ipa 字数256 阅读1 ...

  5. Mac上搭建android环境：Android Studio+GreenVPN

    1.下载Android Studio,https://developer.android.com/sdk/index.html 2.使用GreenVPN,感觉还能够.18/月.http://www.g ...

  6. 利用LruCache载入网络图片实现图片瀑布流效果(改进版)

    PS: 2015年1月20日21:37:27 关于LoadImageAsyncTask和checkAllImageViewVisibility可能有点小bug 改动后的代码请參见升级版本号的代码 ht ...

  7. poj 3259-- Wormholes(SPFA)

                                                                                                         ...

  8. Python使用装饰器自动调用父类__init__

    众所周知,Python中class的构造函数实际是__new__(),但是如果我们执行p1=Point()的时候,不仅会调用Point的__new__方法,而且会调用Point的__init__方法. ...

  9. centos 80端口占用

    netstat -lnp|grep 80 kill -9 1777        #杀掉编号为1777的进程(请根据实际情况输入)service httpd start #启动apache

  10. Wannafly挑战赛25 A 因子 数学

    题面 题意:令 X = n!,给定一大于1的正整数p,求一个k使得 p ^k | X 并且 p ^(k + 1) 不是X的因子,n,,p(1e18>=n>=1e4>=p>=2) ...