<!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. Java Machine Learning Tools & Libraries--转载

    原文地址:http://www.demnag.com/b/java-machine-learning-tools-libraries-cm570/?ref=dzone This is a list o ...

  2. BZOJ4916 神犇和蒟蒻（欧拉函数+杜教筛）

    第一问是来搞笑的.由欧拉函数的计算公式容易发现φ(i2)=iφ(i).那么可以发现φ(n2)*id(n)(此处为卷积)=Σd*φ(d)*(n/d)=nΣφ(d)=n2 .这样就有了杜教筛所要求的容易算 ...

  3. 【刷题】BZOJ 3238 [Ahoi2013]差异

    Description Input 一行,一个字符串S Output 一行,一个整数,表示所求值 Sample Input cacao Sample Output 54 HINT 2<=N< ...

  4. CF449，急需提高姿势水平

    这可能是我第1场只出1题的div1? A 鬼畜题? 我的dev没有字符统计功能,于是只好扔到notepad++上.数错好几次.题目本身没什么特别的地方. B 当时一直没想出来QAQ 题目中说m> ...

  5. openresty--centos7下开发环境安装

    1. 安装依赖的软件包 yum install readline-devel pcre-devel openssl-devel gcc 2. 安装openresty -- 1. 下载openresty ...

  6. Redundant data in update statements

    Q:   Hibernate generates UPDATE statements, which include all columns, regardless of whether I'm cha ...

  7. “玲珑杯”ACM比赛 Round #18 A 前缀预处理 D dp

    DESCRIPTION 今天HHHH 考完了期末考试,他在教学楼里闲逛,他看着教学楼里一间间的教室,于是开始思考: 如果从一个坐标为 (x1,y1,z1)(x1,y1,z1) 的教室走到(x2,y2, ...

  8. laravel添加日常备份任务

    app/Console/Command/MySqlDump.php <?php namespace App\Console\Commands; use Illuminate\Console\Co ...

  9. 「电脑应用」在mac上使用aria2

    Chrome 一. 需要工具: Chrome浏览器,Aria2GUI,Chrome里BaiduExporter插件. 首先先明确一件事情,平时生活中使用的所有工具都建议到官方下载,此处用到的几样提供给 ...

  10. duilib CDateTimeUI 在Xp下的bug修复

    转自:http://my.oschina.net/u/343244/blog/370131 CDateTimeUI 的bug修复.修改CDateTimeWnd的HandleMessage方法 ? 1 ...