<!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. HDU4059_The Boss on Mars

    数论题. 首先我们知道公式:1^4+2^4+3^4+……+n^4=(n)*(n+1)*(2*n+1)*(3*n*n+3*n-1) /30; 然后我们要把多余的减掉.这里用到的是mobius反演. 总之 ...

  2. FZU2127_养鸡场

    题目的意思为要你求出满足三边范围条件且周长为n的三角形的数目. 其实做法是直接枚举最短边,然后就可以知道第二条边的取值范围,同时根据给定的范围缩小范围. 同时根据第二条边的范围推出第三条边的范围,再次 ...

  3. BZOJ 1565 植物大战僵尸(拓扑排序+最大权闭合子图)

    图中的保护关系就类似于最大权闭合子图.即你想杀x,你就一定要杀掉保护x的点,那么把x向保护它的点连边.那么题目就转化成了最大权闭合子图的问题. 但是这个图有点特殊啊... 考虑有环的情况,显然这个环以 ...

  4. 【JavaScript】jsp表格页面记录

    页面效果如下: jsp代码如下(里面引入了很多其他js文件,很多方法调用来自其他js): <%@ page language="java" contentType=" ...

  5. HBase多租户机制分析

    在HBase1.1.0发布之前,HBase同一集群上的用户.表都是平等的,没有优劣之分.这种’大同’社会看起来完美,实际上有很多问题.最棘手的主要有这么两个,其一是某些业务较其他业务重要,需要在资源有 ...

  6. 网络编程----socket介绍、基于tcp协议的套接字实现、基于udp协议的套接字实现

    一.客户端/服务器架构(C/S架构)                                                即C/S架构,包括: 1.硬件C/S架构(打印机) 2.软件C/S架 ...

  7. laravel query builder/ Eloquent builder 添加自定义方法

    上次干这事已经是一年前了,之前的做法特别的繁琐.冗余,具体就是创建一个自定义 Builder 类,继承自 Query\Builder,然后覆盖 Connection 里面获取 Builder 的方法, ...

  8. tf.session.run()单函数运行和多函数运行区别

    tf.session.run()单函数运行和多函数运行区别 觉得有用的话,欢迎一起讨论相互学习~Follow Me problem instruction sess.run([a,b]) # (1)同 ...

  9. Jquery validate验证表单时多个name相同的元素只验证第一个的问题

    下面搜集了五种方法,主要还是前两个提供了解决方案,第三种需要修改jQuery源码: 修复jquery.validate插件中name属性相同(如name='a[]')时验证的bug 使用jquery. ...

  10. 多例模式，保证实例的唯一性，仅适用于form窗体

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.W ...