<!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 #;

    }

     </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[])

     {

     var reader = new FileReader();

     reader.onload = function(evt){

     prevDiv.innerHTML = '<img' +' style='+'"width: 100px;height: 100px"'+' src="' + evt.target.result + '" />'; 

    }

     reader.readAsDataURL(file.files[]);

    }

     else

     {

     prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';

     }

     }

     </script>

     </body>

     </html>

js实现图片上传预览的更多相关文章

  1. js实现图片上传预览及进度条

    原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...

  2. [前端 4] 使用Js实现图片上传预览

    导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...

  3. 移动端 js 实现图片上传 预览

    方法一: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&q ...

  4. js实现图片上传预览功能，使用base64编码来实现

    实现图片上传的方法有很多,这里我们介绍比较简单的一种,使用base64对图片信息进行编码,然后直接将图片的base64信息存到数据库. 但是对于系统中需要上传的图片较多时并不建议采用这种方式,我们一般 ...

  5. JS实现图片上传预览效果：方法一

    <script type="text/javascript"> //处理file input加载的图片文件 $(document).ready(function(e) ...

  6. js实现图片上传预览功能,使用base64编码来实现

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

  8. js前端实现多图图片上传预览

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  9. js:s上次预览，上传图片预览，图片上传预览

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. noip模拟题《序》sort

    [问题背景]      zhx 给他的妹子们排序.[问题描述]      zhx有N个妹子,他对第i个妹子的好感度为ai, 且所有ai两两不相等.现在N个妹子随意站成一 排,他要将她们根据好感度从小到 ...

  2. CSS预处理语言-less 的使用

    Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量.Mixin.函数等特性,使 CSS 更易维护和扩展. Less 可以运行在 Node 或浏览器端. Less的编译处理 作为一 ...

  3. 编写高效SQL语句（转）

    转至http://blog.csdn.net/u012150457/article/details/41846299 一.编写高效SQL语句 1) 选择最有效的表名顺序(仅适用于RBO模式) ORAC ...

  4. Mybatis笔记二：org.apache.ibatis.binding.BindingException: Invalid bound statement (not found)

    错误异常:org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): com.test.dao.N ...

  5. redis的简单事务

    Redis对事务的支持目前还比较简单.Redis只能保证一个client发起的事务中的命令可以连续的执行,而中间不会插入其他client的命令.当一个client在一个连接中发出multi命令时,这个 ...

  6. android ndk 编译的时候指令集的选取

    android ndk在编译的时候默认生成的是thumb指令(拇指)不是arm(手臂)指令,但是有时候在看反汇编的时候,不太熟悉thumb指令或者说thumb指令看起来更费劲,需要生成arm指令,这个 ...

  7. ＭDK5.13新建工程步骤

    http://www.stmcu.org/module/forum/thread-600249-1-1.html 本人也是接触stm32没多久,之前用的MDK是5.1,现在用的是5.13,MDK5.0 ...

  8. 练习calico的网络policy

    1.安装docker,kubelet kubeadm kubectl 1 ssh-keygen 2 cat .ssh/authorized_keys 3 cat .ssh/id_rsa.pub 4 s ...

  9. ubuntu 安装微信开发者工具

    https://github.com/cytle/wechat_web_devtools 实测:64位  32位的可以... 参考命令; 2030 sudo apt-get install wine1 ...

  10. SQLServer字符串的一些截取技巧

    先看一张科学家的生卒年月表 截取科学家的出生年份可以很方便的用left函数截取,如果要截取去世年份,需要先获取字符“—”的位置. select substring(c,charindex('—',c) ...