JS获取图片的缩略图

最新推荐文章于 2023-07-26 17:13:11 发布

weixin_30906671

最新推荐文章于 2023-07-26 17:13:11 发布

阅读量753

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/andysd/p/3693919.html

版权

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[]" οnchange="change(this)"/>
</span>
<div>
<img id="img" width="100px" height="100px" />
</div>

</body>
</html>

转载于:https://www.cnblogs.com/andysd/p/3693919.html