查看缩略图dome.html

来源：互联网发布：航拍测绘软件编辑：程序博客网时间：2024/06/04 17:44
<!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" onchange="handleFiles(this.files)"/></div><div id="imgPanel"></div><div id="fileAttributes"></div><script src="js/jquery1.11.1.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>
阅读全文
0 0