<!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. 【习题 4-5 Uva1590】 IP Networks

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 假设从第i位开始有不一样的. 那么就把i+1..32位全都置0. 掩码的话类似.前i为全为1,后面32-i位全0. 尽量让后面的连续 ...

  2. LID&LDS 的另外一种算法

    参见:LIS,LDS的另类算法(原) 然后讲讲我的想法:  有结论不上升子序列的个数=最长上升子序列的长度.....至于为什么,在下面讲 上代码: #include <iostream> ...

  3. Android Studio怎样删除module

    当你想在Android Studio中删除某个module时,大家习惯性的做法都是选中要删除的module.右键去找delete.可是 在Android Studio中你选中module,右键会发现没 ...

  4. rac环境改动spfile后遭遇ora-29250小例

    原创作品.出自 "深蓝的blog" 博客.转载时请务必注明出处,否则有权追究版权法律责任. 深蓝的blog:http://blog.csdn.net/huangyanlong/ar ...

  5. Android软键盘状态的切换及其强制隐藏

    MainActivity例如以下: package cc.c; import android.os.Bundle; import android.view.View; import android.v ...

  6. servlet 处理过程

    刚才花了一个小时找 servlet 的一个错误.终于找出来了,也大概明确 tomcat server对请求的处理顺序.以下做简单总结: 浏览器发送请求,传给 tomcat 在此请求地址指向的文件中定义 ...

  7. codetemplate

    <?xml version="1.0" encoding="UTF-8" standalone="no"?><templa ...

  8. 神经网络中的激活函数——加入一些非线性的激活函数，整个网络中就引入了非线性部分，sigmoid 和 tanh作为激活函数的话，一定要注意一定要对 input 进行归一话，但是 ReLU 并不需要输入归一化

    1 什么是激活函数? 激活函数,并不是去激活什么,而是指如何把“激活的神经元的特征”通过函数把特征保留并映射出来(保留特征,去除一些数据中是的冗余),这是神经网络能解决非线性问题关键. 目前知道的激活 ...

  9. EOJ 2847 路由结点

    数学知识 凸N边形的对角线条数为:n(n-3)/2因为每一个交点对应两条对角线,而两条对角线又对应着一个四边形.于是焦点个数就对应四边形的个数.问题转化成由凸n边形的n个顶点取4个顶点可组成多少个四边 ...

  10. Java-Maven：POM百科

    ylbtech-Java-Maven:POM百科 Maven是以项目为中心的设计.POM(project object model)是Maven对一个单一项目的描述.没有POM的话,Maven是毫无用 ...