js获取上传文件的缩略图

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>jQuery File Upload Demo - AngularJS version</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

.btn{

}

.addfiles{

display: inline-block;

font-weight: 400;

text-align: center;

vertical-align: middle;

cursor:pointer;

background-image: none;

border:1px solid transparent;

white-space: nowrap;

padding:6px 12px;

font-size:14px;

line-height: 1.42857143;

border-radius: 4px;

-webkit-user-select:none;

-moz-user-select:none;

-ms-user-select:none;

user-select:none;

margin-bottom:5px;

position: relative;

overflow: hidden;

color:#FFF;

background-color: #5CB85C;

border-collapse: #4CAE4C;

}

.addfiles:hover, .addfiles:focus, .addfiles:active{

color:#FFF;

background-color: #47A447;

border-color:#398439;

text-decoration: none;

}

.addfiles:active{

outline:0;

background-image: none;

-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);

box-shadow:inset 0 3px 5px rgba(0,0,0,.125);

}

.addfiles input{

position: absolute;

top:0;

right:0;

margin:0;

opacity: 0;

-ms-filter:'alpha(opacity=0)';

font-size: 200px;

direction: ltr;

cursor:pointer;

display: block;

}

</style>

<script>

function change(v){

getPath2(document.getElementById("img"),v,v.value);

}

//附带不用修改浏览器安全配置的javascript代码，兼容ie， firefox全系列

function getPath2(obj,fileQuery,transImg){

if(window.navigator.userAgent.indexOf("MSIE")>=1){

//obj.select();

//var path = document.selection.createRange().text;

//obj.removeAttribute("src");

//obj.setAttribute("src",path);

obj.setAttribute("src",transImg);

//obj.style.filter= "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+path+"', sizingMethod='scale');";

}else{

var file =fileQuery.files[0];

var reader = new FileReader();

reader.onload = function(e){

obj.setAttribute("src",e.target.result)

}

reader.readAsDataURL(file);

}

}

</script>

</head>

<body>

<span class="btn addfiles">

<span>Add files...</span>

<input id="file" type="file" name="files[]" onchange="change(this)"/>

</span>

<div>

<img id="img" width="100px" height="100px" />

</div>

</body>

</html>

　　

JS获取图片的缩略图的更多相关文章

  1. JS获取图片的缩略图,并且动态的加载多张图片

    找了好多资料也没有找到该死的ie的解决办法,最后放弃了ie <!DOCTYPE html> <html> <head> <meta charset=" ...

  2. JS获取图片实际宽高及根据图片大小进行自适应

    JS获取图片实际宽高,以及根据图片大小进行自适应  <img src="http://xxx.jpg" id="imgs" onload="ad ...

  3. JS获取图片实际宽高

    JS获取图片实际宽高,以及根据图片大小进行自适应 <img src="http://xxx.jpg" id="imgs" onload="ada ...

  4. js点击获取—通过JS获取图片的相对坐标位置

    一.通过JS获取鼠标点击时图片的相对坐标位置 源代码如下所示: <!DOCTYPE html> <html lang="en"> <head> ...

  5. Js获取图片原始宽高

    如果我们页面看到的图片都是缩略图,那就需要做个图片点击放大效果,那么怎样获取图片的原始宽高呢?方法如下: //获取图片原始宽度 function getNaturalWidthAndHeight(im ...

  6. Java乔晓松-android中获取图片的缩略图(解决OutOfMemoryError)内存溢出的Bug

    由于android获取图片过大是会出现内存溢出的Bug 07-02 05:10:13.792: E/AndroidRuntime(6016): java.lang.OutOfMemoryError 解 ...

  7. js获取图片的EXIF，解决图片旋转问题

    相信大家在做项目的时候会遇到在canvas里加入图片时,图片发生90°,180°的旋转.当时的你肯定时懵逼的,为毛. 其实这就是图片的EXIF搞的鬼. 什么是EXIF 简单来说,Exif 信息就是由数 ...

  8. js获取图片的原始尺寸

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  9. js点击获取—通过JS获取图片的绝对对坐标位置

    一.通过JS获取鼠标点击时图片的相对坐标位置 源代码如下所示:  <!DOCTYPE html> <html lang="en"> <head> ...

随机推荐

  1. Qt之QStyledItemDelegate类

    主要用于自定义项的display和编辑: 通常有两个重载函数: // 决定该单元格的推荐大小 virtual QSize sizeHint(const QStyleOptionViewItem &am ...

  2. SparkSQL的3种Join实现

    引言 Join是SQL语句中的常用操作,良好的表结构能够将数据分散在不同的表中,使其符合某种范式,减少表冗余.更新容错等.而建立表和表之间关系的最佳方式就是Join操作. 对于Spark来说有3中Jo ...

  3. Nginx user_agent、if指令及全局变量

    Nginx user_agent.if指令及全局变量 1.User_agent User Agent中文名为用户代理,简称 UA,它是一个特殊字符串头,使得服务器能够识别客户使用的操作系统及版本.CP ...

  4. openlayers对接百度地图新方法

    上次给大家提供的openlayers对接百度地图有些问题,是因为没有进行分辨率设置,也没有进行相应的平面坐标转换,获取getURL的方法还是没有变化的 getURL: function (bounds ...

  5. Laravel之Eloquent ORM关联

    一.一对一 1.主对从(hasOne) 从User模型中取出用户的手机 User模型中: /** * 获取关联到用户的手机 */ public function phone() { return $t ...

  6. spring集成PHPRPC及使用

    PHPRPC,它的商业版本是Hprose.这里仅记录其使用方法.其它相关内容可自行搜索. 对于开源的东西,建议大家看看其源码. 1.需要引入的jar包:phprpc_spring.jar,http:/ ...

  7. 在 Linux 系统下使用 PhotoRec & TestDisk 工具来恢复文件

    当你在系统中有意或无意地使用 shift + delete 组合键.删除选项,或是清空回收站的方式来删除一个文件时,该文件的内容并没有从硬盘(或是其它存储设备)上直接销毁. 它仅仅是从系统的目录结构中 ...

  8. 真正的Java学习从入门到精通

    http://www.it.com.cn/f/edu/059/6/169189.htm 一. 工具篇JDK (Java Development Kit) JDK是整个Java的核心,包括了Java运行 ...

  9. .NET CORE 2.0小白笔记（三）：数字化平台之微信平台策略

    当下,互联网技术正在深刻地重构我们的社会,各大企事业单位——大到万人集团公司,小到图文复印店——都在争先恐后地从所谓的“传统行业”中脱胎换骨一番以完成数字化转型. 在这个过程中,“企业即IT”.“科技 ...

  10. 2.JAVA编程思想——一切都是对象

    一切都是对象 欢迎转载.转载请标明出处:http://blog.csdn.net/notbaron/article/details/51040221 虽然以C++为基础,但 Java 是一种更纯粹的面 ...