<!DOCTYPE HTML>
<HTML>
<HEAD>
<META CHARSET="UTF-8"/>
<TITLE>查看縮略圖</TITLE>
<style>
.highlight,.unhighlight{
max-height:100px;
max-width:100px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
margin:10px;
}
.highlight{border:5px solid #6f0;}
.unhighlight{border:5px solid #000;}
</style>
</HEAD>
<BODY>
<h2> Select the images to preview.</h2>
<div>
<input type="file" id="input2" multiple="true" οnchange="handleFiles(this.files)"/>
</div>
<div id="imgPanel"></div>
<div id="fileAttributes"></div>
<script src="js/jquery1.11.js"></script>
<script>
function handleFiles(f){
var fileLimit = 10;
var sizeLimit = 50000;//設置限制圖片大小
var imageType = /image.*/;
var imgPanel = document.getElementById('imgPanel');
imgPanel.innerHTML = '';
var sizeLimitBytes = sizeLimit * 1024;
if(f.length < fileLimit){
for(var i =0;i<f.length;i++){
var file = f[i];
if(file.type.match(imageType)){
if(file.size < sizeLimitBytes){
var img = document.createElement('img');
img.file = file;
img.className ='unhighlight';
img.addEventListener('mouseover',showFile,false);
img.addEventListener('mouseout',clearFile,false);
imgPanel.appendChild(img);
var reader = new FileReader();
reader.onload = (function(aImg){
return function(e){
aImg.src = e.target.result;
};
})(img);
reader.readAsDataURL(file);
}else{
alert(file.name + ' '+' is larger than ' + sizeLimit +' ' +'KB.');
}
}else{
alert(file.name +' '+ 'is not a image.');
}
}
}else{
imgPanel.innerHTML = 'Only ' + fileLimit +' '+ 'file can be selected at a time.';
}
}
function showFile(){
this.className = 'highlight';
var fileAttributes = document.getElementById('fileAttributes');
var file =this.file;
var fileinfo = 'File info:<br>';
fileinfo += file.name + '<br>';
fileinfo += file.type + '<br>';
fileinfo += (file.size/1024).toFixed(2) + 'KB<br>';
fileinfo += file.lastModifiedDate + '<br>';
fileAttributes.innerHTML = fileinfo;
}
function clearFile(){
var fileAttributes = document.getElementById('fileAttributes');
fileAttributes.innerHTML ='';
this.className = 'unhighlight';
}
</script>
</BODY>
</HTML>
<HTML>
<HEAD>
<META CHARSET="UTF-8"/>
<TITLE>查看縮略圖</TITLE>
<style>
.highlight,.unhighlight{
max-height:100px;
max-width:100px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
margin:10px;
}
.highlight{border:5px solid #6f0;}
.unhighlight{border:5px solid #000;}
</style>
</HEAD>
<BODY>
<h2> Select the images to preview.</h2>
<div>
<input type="file" id="input2" multiple="true" οnchange="handleFiles(this.files)"/>
</div>
<div id="imgPanel"></div>
<div id="fileAttributes"></div>
<script src="js/jquery1.11.js"></script>
<script>
function handleFiles(f){
var fileLimit = 10;
var sizeLimit = 50000;//設置限制圖片大小
var imageType = /image.*/;
var imgPanel = document.getElementById('imgPanel');
imgPanel.innerHTML = '';
var sizeLimitBytes = sizeLimit * 1024;
if(f.length < fileLimit){
for(var i =0;i<f.length;i++){
var file = f[i];
if(file.type.match(imageType)){
if(file.size < sizeLimitBytes){
var img = document.createElement('img');
img.file = file;
img.className ='unhighlight';
img.addEventListener('mouseover',showFile,false);
img.addEventListener('mouseout',clearFile,false);
imgPanel.appendChild(img);
var reader = new FileReader();
reader.onload = (function(aImg){
return function(e){
aImg.src = e.target.result;
};
})(img);
reader.readAsDataURL(file);
}else{
alert(file.name + ' '+' is larger than ' + sizeLimit +' ' +'KB.');
}
}else{
alert(file.name +' '+ 'is not a image.');
}
}
}else{
imgPanel.innerHTML = 'Only ' + fileLimit +' '+ 'file can be selected at a time.';
}
}
function showFile(){
this.className = 'highlight';
var fileAttributes = document.getElementById('fileAttributes');
var file =this.file;
var fileinfo = 'File info:<br>';
fileinfo += file.name + '<br>';
fileinfo += file.type + '<br>';
fileinfo += (file.size/1024).toFixed(2) + 'KB<br>';
fileinfo += file.lastModifiedDate + '<br>';
fileAttributes.innerHTML = fileinfo;
}
function clearFile(){
var fileAttributes = document.getElementById('fileAttributes');
fileAttributes.innerHTML ='';
this.className = 'unhighlight';
}
</script>
</BODY>
</HTML>
