<!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. 数位dp无前导零

    题目链接:http://    www.lydsy.com/JudgeOnline/problem.php?id=1026 #include <iostream> #include < ...

  2. Solr Update插件自定义Update Chain按条件更新索引

    背景:基于call客,来电和跟进记录等多个数据来源的用户文档,需要在更新是判断首来源的时间. 如对电话号码11xxxx来说,来电时间是今天,call客时间是昨天,而call客数据又可能因为网络原因晚上 ...

  3. django orm多条件查询及except处理不存在记录的样码

    日常所用的功能, 记录下来加深记忆. try: sv_set = Sv.objects.get(project=site_name, version=deploy_version) print sv_ ...

  4. HDU 1599

    裸的FLOYD 求最小环. #include <iostream> #include <cstdio> using namespace std; ; ; int n,m,min ...

  5. HDU 1466

    经典DP,这样的递推确实有点难. 把所有直线分成两组,可以知道 m条直线的交点方案数 =(m-r)条平行线与r条直线交叉的交点数  + r条直线本身的交点方案 亦就是  =(m-r)*r+r条之间本身 ...

  6. JavaScript中bind、call、apply函数使用方法具体解释

    在给我们项目组的其它程序介绍 js 的时候,我准备了非常多的内容,但看起来效果不大,果然光讲还是不行的,必须动手. 前几天有人问我关于代码里 call() 函数的使用方法.我让他去看书,这里推荐用js ...

  7. C语言播放声音最简单的两种方法

    1. 假设仅须要播放波形文件wav格式的声音,非常easy.仅仅需一句话: PlaySound(TEXT("Data\\1.wav"), NULL, SND_FILENAME | ...

  8. Java类集综合练习——信息管理（增、删、改、查）

    一.实现功能——模拟学生选课功能 1.选择课程 2.修改所选课程 二.实现功能——模拟学生信息管理功能 1.添加学生信息 2.修改学生信息 二.主要代码(在同一个包里) 1.课程类 public cl ...

  9. Linux实时查看日志,访问前10IP 和相关命令

    Nginx日志分析可以获得很多有用的信息,现在来试试最基本的,获取最多访问的前10个IP地址及访问次数. 既然是统计,那么awk是必不可少的,好用而高效. 命令如下: awk '{a[$1] += 1 ...

  10. log4net写日志的时间附带时区信息

    <conversionPattern value="%date{yyyy-MM-dd HH:mm:ss.fffzzz} [%thread] %-5level %logger - %me ...