<!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. C# 实现串口发送数据（不用串口控件版）

    参考:https://blog.csdn.net/mannix_lei/article/details/79979432 https://www.cnblogs.com/ElijahZeng/p/76 ...

  2. Netty学习总结（3）——Netty百万级推送服务

    1. 背景 1.1. 话题来源 最近很多从事移动互联网和物联网开发的同学给我发邮件或者微博私信我,咨询推送服务相关的问题.问题五花八门,在帮助大家答疑解惑的过程中,我也对问题进行了总结,大概可以归纳为 ...

  3. Spring Cloud-Zuul(十)

    个人理解 在微服务体系体系中 我们会有很多服务.在内部体系中 通过eureka实现服务的自动发现通过ribbon实现服务的调用.但是如果对外部体系提供接口 我们就会涉及到接口的安全性,我们不能可能对每 ...

  4. MySQL日志格式 binlog_format

    MySQL 5.5 中对于二进制日志 (binlog) 有 3 种不同的格式可选:Mixed,Statement,Row,默认格式是 Statement.总结一下这三种格式日志的优缺点. MySQL ...

  5. Spring事务的传播行为分析

    前言 最近项目有涉及到Spring事务,所以工作之余,想认真了解学习下Spring事务,查阅了若干资料,做了一个demo(PS:参考了大牛的). 现分享总结如下: 1.Spring 事务的简介 理解事 ...

  6. Elasticsearch顶尖高手系列课程推荐

    Elasticsearch,是目前行业中非常热门的一个技术.Elasticsearch是一种分布式的海量数据搜索与分析的技术,可以用于电商网站.门户网站.企业IT系统等各种场景下的搜索引擎,也可以用于 ...

  7. 搭建单机CDH环境，并更新spark环境

    搭建单机CDH环境,并更新spark环境 1,安装VMWare Player,http://dlsw.baidu.com/sw-search-sp/soft/90/13927/VMware_playe ...

  8. 新安装的wampserver怎么使用本机已有的mysql作为数据库

    一般在一台没有安装mysql的机器上安装好wamp后,能够直接在wamp的phpMyAdmin中打开集成的mysql并设置用户信息. 而假设之前已经安装配置好mysql(实usernamepasswo ...

  9. 输入URL 一瞬间发生了什么

    当你在浏览器中输入url后发生了什么?下面是个人学习过程中的总结,如有理解不正确或不足的地方希望大家指出.先上一张脑图: 还有个问题:www.baidu.com 键入后,域名怎么知道的是这个IP! 补 ...

  10. Error解决：Property&#39;s synthesized getter follows Cocoa naming convention for returning &#39;owned&#39;

    在项目中定义了以new开头的textField.结果报错: 先看我的源代码: #import <UIKit/UIKit.h> @interface ResetPasswordViewCon ...