<!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. 淘宝的开源分布式文件系统TFS

    TFS(Taobao FileSystem)是淘宝团队开源的海量非结构化数据存储设计的分布式系统.构筑在普通的Linux机器集群上,可为外部提供高可靠和高并发的存储访问.高可扩展.高可用.高性能.面向 ...

  2. 念念不忘SERVLET

    这个弄弄也有意思,以前无法入门,没有系统性概念,现在慢慢开始懂了.. 这个SERVLET/JSP学习笔记也易懂.. 那个JAVA7程序设计也可以慢慢看来,, 再加上SPRING,我黑心了??:) pa ...

  3. BZOJ 2631 tree 动态树(Link-Cut-Tree)

    题目大意:维护一种树形数据结构.支持下面操作: 1.树上两点之间的点权值+k. 2.删除一条边.添加一条边,保证加边之后还是一棵树. 3.树上两点之间点权值*k. 4.询问树上两点时间点的权值和. 思 ...

  4. Python查询数据库，中文的结果显示不出来

    表里面的数据: 问题:查询数据库,返回结果不是中文可以,是中文的话就报错UnicodeEncodeError: 'gbk' codec can't encode character '\xd4' in ...

  5. HTML的表单form以及form内部标签

    <html> <head> <title> form表单的使用 </title> <!-- 标签名称:form 表单标签 属性:action:提交 ...

  6. C 中 main 函数的參数

          看到不同的人写出的 C 或者 C++ 程序时,可能会出现不一样的 main 函数的定义,以下的几种定义方式都是对的: int main(void) int main(int argc) i ...

  7. Swift Int to String

    最近在项目中用到 swift, 涉及到 Int 转 String 类型,需要保留两位数,所以去研究了一下,做个记录 1.通常情况下1.1 Int转 String let intValue1 = 2 l ...

  8. php处理传值为空

    if(isset($_GET['id'])){}else{}isset($_GET['id'])==null

  9. 项目中遇到的所有ECharts图表集合

    全放在了ECharts官网示例里面以后会一直往里面添加: https://gallery.echartsjs.com/explore.html?u=bd-2133619855&type=wor ...

  10. Fail2ban + firewalld 防护doss攻击

    系统环境:centos7.3 用途:利用fail2ban+Firewalld来防CC攻击和SSH爆破 准备工作: 1.检查Firewalld是否启用 #如果您已经安装iptables建议先关闭 ser ...