<!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. 转换成json字符串,与json字符串转换成java类型都要先转换成json对象

    转换成json字符串,与json字符串转换成java类型都要先转换成json对象

  2. java 父类的引用调用自己的属性 但是调用的方法必须是重写过的父类的方法 因为编译时候把他当作父类 运行时候才是他自己 所以必须重写父类得方法

  3. Redis安装配置及使用详解

    1. 简介-两个程序通信,除了socket就是文件了,但是通过磁盘效率太低了,之前的RabbitMQ只是实现了消息的传递,现在要是实现数据的共享(一份数据,可供多人查阅),可以通过缓存实现,一个中间商 ...

  4. BZOJ1563/洛谷P1912 诗人小G 【四边形不等式优化dp】

    题目链接 洛谷P1912[原题,需输出方案] BZOJ1563[无SPJ,只需输出结果] 题解 四边形不等式 什么是四边形不等式? 一个定义域在整数上的函数\(val(i,j)\),满足对\(\for ...

  5. 2017-2018-2 20165218 实验三《敏捷开发与XP实践》实验报告

    实验三 敏捷开发与XP实践 课程:java程序设计 姓名:赵冰雨 学号:20165218 指导教师:娄嘉鹏 实验日期:2018.4.30 实验内容.步骤与体会: (一)编码标准 //实验要求 //参考 ...

  6. Web服务器进程连接数和请求连接数

    1.查看Web服务器进程连接数: netstat -antp | grep 80 | grep ESTABLISHED -c 2.查看Web服务器的并发请求数及其TCP连接状态: netstat -n ...

  7. Yura

    Portal --> broken qwq Description ​  给你一个长度为\(n\)的序列\(a\)和一个正整数\(k\),求满足如下条件的区间\([l,r]\)的数量:\((\s ...

  8. C#调用GDI+1.1中的函数实现高斯模糊、USM锐化等经典效果。

    http://www.cnblogs.com/Imageshop/archive/2012/12/13/2815712.html 在GDI+1.1的版本中,MS加入不少新的特性,其中的特效类Effec ...

  9. c++11变长参数函数模板

    By francis_hao    Mar 25,2018   一个最简单的实例大概是这个样子: #include <iostream>using namespace std; /*变长参 ...

  10. epoll的一些细节和注意事项

    epoll_event结构 struct epoll_event { uint32_t events; /* Epoll events */ epoll_data_t data; /* User da ...