<!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. 图像滑动窗口 利用opencv和matlab

    1.利用opencv实现图像滑动窗口操作 功能:利用opencv实现图像滑动窗口操作(即利用已知尺寸的窗口遍历整幅图像,形成许多子图像)  vs2015+opencv3.1  2016.10 函数实现 ...

  2. 【[Offer收割]编程练习赛11 D】排队接水

    [题目链接]:http://hihocoder.com/problemset/problem/1488 [题意] 中文题 [题解] 莫队算法+树状数组; 首先贪心地知道,应该按照时间从小到大的顺序打水 ...

  3. foj 2173 floyd+矩阵快速幂

     Problem 2173 Nostop Accept: 52    Submit: 210 Time Limit: 3000 mSec    Memory Limit : 32768 KB  Pro ...

  4. 1013MySQL监控利器-Innotop

    转自 http://www.cnblogs.com/ivictor/p/5101506.html 安装过程中 可以使用 YUM INSTALL INNOTOP进行直接安装 Innotop是一款十分强大 ...

  5. 项目 cmdb(一)

    Django之ModelForm组件 ModelForm    a.  class Meta:            model,                           # 对应Mode ...

  6. 万众创业，互联网+，WTO

    WTO的保护期,发展的非常繁荣.但大部分的资源都配置在了房地产这个支柱产业, 而被保护的行业小日子过得不错, 研发再投入?那是傻子才做的事情,别墅.豪车.美女.这才是生活. 但突然有一天,发现保护期要 ...

  7. Linux学习(二) wget命令的使用

    近期在Linux下进行一些操作,在非常多地方都用到了wget这个命令,记录一下一些有关wget的使用方法: wget是在Linux下开发的开放源码的软件,作者是Hrvoje Niksic,后来被移植到 ...

  8. hdoj--1151--Air Raid（最大独立集）

    Air Raid Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total S ...

  9. 【HAOI 2008】 移动玩具

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1054 [算法] 广度优先搜索 [代码] #include<bits/stdc+ ...

  10. 第17章 Redis概述

    17.2.1 在Windows下安装Redis https://github.com/ServiceStack/redis-windows/tree/master/downloads redis-se ...