<!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. Apache Hadoop YARN – NodeManager--转载

    原文地址:http://zh.hortonworks.com/blog/apache-hadoop-yarn-nodemanager/ The NodeManager (NM) is YARN’s p ...

  2. 【开发工具IDE】eclipse的web项目的tomcat安装部署问题

    一.发现问题 在eclipse中新建Dynamic Web Project,配置好本地的tomcat并写好代码后选择Run on Server,但运行后发现在tomcat的安装目录下的webapps并 ...

  3. Seek the Name, Seek the Fame POJ - 2752（拓展kmp || kmp）

    题意: 就是求前缀和后缀相同的那个子串的长度  然后从小到大输出 解析: emm...网上都用kmp...我..用拓展kmp做的  这就是拓展kmp板题嘛... 求出extend数组后  把exten ...

  4. Win10 安装 Linux 子系统

    Win10 安装 Linux 子系统 因为最近要使用Linux搭服务器,但是用远程的话延迟很烦,用双系统切换很麻烦,用虚拟机又会有点卡,刚好Windows10最近更新了正式版的WSL(windows下 ...

  5. 【Revit API】Revit读取当前rvt的所有视图与其名称

    1)读取所有视图: public static ViewSet GetAllViews(Document doc) { ViewSet views = new ViewSet(); FilteredE ...

  6. Codeforces Round #406 (Div. 2)滚粗记

    A 一看到题,不是一道解不定方程的裸题吗,调了好久exgcd. 其实一个for就好了啊 B 一直WA ON TEST 7真是烦,一想会不会是编号太大了,又写了一个map版本,无用. 调了好久好久才发现 ...

  7. [ACM][2018南京预赛]Sum

    一.题面 样例输入: 2 5 8 样例输出: 8 14 二.思路 关键词:线性筛 在Zed的帮助下知道了这是一道线性筛的比较裸的题了.考试过程中肝这道题的时间最久,费了心思找到递推式后,发现根本不是在 ...

  8. [IOI2013]Dreaming

    link 一道非常类似的题目(link) 试题大意 给你一棵含有$n$个节点的有边权森林,问每次连边将会用$L$的代价,问你若此图通过加边成为树时的最小直径.$n \leq 5\times 10^5$ ...

  9. jquery、css3动态显示百分比圆

    动态显示百分圆 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m ...

  10. 使用OpenCV进行标定（转载）

    转载自牛猫靖  http://www.cnblogs.com/2008nmj/p/6278076.html 使用OpenCV进行相机标定 1. 使用OpenCV进行标定 相机已经有很长一段历史了.但是 ...