<!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. RxSwift基本使用（一）

    备注:本文参考自田腾飞博文 [RxSwift入坑解读-你所需要知道的各种概念] (http://www.codertian.com/2016/11/27/RxSwift-ru-keng-ji-read ...

  2. [codeforces743E]Vladik and cards

    E. Vladik and cards time limit per test  2 seconds memory limit per test  256 megabytes input standa ...

  3. Django之CSS,JS静态文件的配置

    一. 专门创建一个目录放静态文件,即CSS,JS等. 1)先把jquery.min拿过来. 2)新建一个CSS文件放入样式 3)在login.html中引入.css文件 在login.html中引入. ...

  4. 【BZOJ1063】【NOI2008】道路设计（动态规划）

    [BZOJ1063][NOI2008]道路设计(动态规划) 题面 BZOJ 题解 发现每个点最多只能被修一次等价于每个点最多只能和两条铁路相邻 考虑一个\(dp\) 设\(f[i][0/1/2]\)表 ...

  5. 通过系统自带的MSI安装包来提权账号

    Windows environments provide a group policy setting which allows a regular user to install a Microso ...

  6. 【bzoj3589】动态树

    Portal --> bzoj3589 Description 给你一棵\(n\)个节点的树,总共有\(q\)次操作,每次操作是以下两种中的一种: 操作\((0,x,delta)\):给以\(x ...

  7. 【learning】中国剩余定理

    问题描述 "今有物不知其数,三三数之余二,五五数之余三,七七数之余二.问物几何?" emmm这是..最开始这个问题被提出来的描述 其实说白了就是求解一次同余式组 然后还可以..解决 ...

  8. 【bzoj4004】装备购买

    Portal-->bzoj4004 Solution 这题的话..其实就是求\(n\)个\(m\)维向量的极大线性无关组,并且要求权值最大 然后套路什么的跟Portal-->bzoj310 ...

  9. Git入门指南

    git学习资源: Pro Git(中文版) Learn Git in your browser for free with Try Git. Git常用命令 Reference 常用 Git 命令清单 ...

  10. 《JavaScript高级程序设计（第三版）》-2

    变量 ECMAScript变量是松散类型的,即可以保存任何类型的数据. 初始化变量不会把它标记类型,初始化的过程只是给变量付一个值,因此可以在修改变量的同时修改值的类型.但并不推荐这样做. var m ...