<!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. 单元测试，我在公司Web团队的分享

    一.单元测试的意义 1.质量 2.效率 (短期和长远都值得)写单元测试代码,总的来说其实是更节省开发时间,更保证质量的.Controller.Service.Dao其实都可以进行测试. 通过启动 To ...

  2. VirtualBox虚拟机下 解决centos系统无法上网的问题

    首先,在VirtualBox中设置网卡连接方式:点“设置”,在弹出的界面中点“网络”,最后选择“连接方式”为“桥接网卡”或者网都可以络地址转换  这两种我试了试都可以 接下来修改一个文件就行: 1.打 ...

  3. mybatis源码阅读-SqlSessionFactory和SqlSession(三)

    说明 读了3遍:https://my.oschina.net/zudajun/blog/665956 现在统一整理成笔记 并跟着源码一行一行调试 统一整理起来 SqlSession 接口定义 publ ...

  4. ElasticSearch中profile API的使用

    1. 前言 profile API 是 Elasticsearch 5.x 的一个新接口.通过这个功能,可以看到一个搜索聚合请求,是如何拆分成底层的 Lucene 请求,并且显示每部分的耗时情况. 2 ...

  5. 0709关于mysql优化思路【何登成】

    转自 http://isky000.com/database/mysql-performance-tuning-sql 优化目标 减少 IO 次数IO永远是数据库最容易瓶颈的地方,这是由数据库的职责所 ...

  6. Hadoop入门进阶步步高（一）-环境准备

    前言 Hadoop从存储上来说,是相似于冗余磁盘阵列(RAID)的存储方式.将数据分散存储并提供以提供吞吐量,它的存储系统就是HDFS(Hadoop Distuibute Fils System).从 ...

  7. Android基础新手教程——3.4 TouchListener PK OnTouchEvent + 多点触碰

    Android基础新手教程--3.4 TouchListener PK OnTouchEvent + 多点触碰 标签(空格分隔): Android基础新手教程 本节引言: 如题,本节给大家带来的是To ...

  8. LeetCode 210. Course Schedule II(拓扑排序-求有向图中是否存在环)

    和LeetCode 207. Course Schedule(拓扑排序-求有向图中是否存在环)类似. 注意到.在for (auto p: prerequistites)中特判了输入中可能出现的平行边或 ...

  9. 面向对象的三大特性之二——继承（含super的使用）

    1.继承的语法:class 子类 extends 父类 例1: class Person { int age; String name; public void print1() { System.o ...

  10. Nginx 源码安装和调优

    常见web架构: LAMP  =Linux+Apache+Mysql+PHP LNMP  =Linux+Nginx+Mysql+PHP   nginx概述: 知道:1  不知道:2 Nginx (&q ...