源界面 源界面 1个月前

选择图片后显示缩略图（自动生成缩略图）

js

ittTSrMQ
选择图片后显示缩略图（自动生成缩略图）

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>显示选择图片的缩略图</title>
  7.     <style>
  8.         #dropbox {
  9.         width: 200px;
  10.         height: 70px;
  11.         line-height: 70px;
  12.         text-align: center;
  13.         border: 2px dashed #999;
  14.         border-radius: 5px;
  15.         background: #fbfbfb;
  16.         color: #666;
  17.     }
  19.     #preview>img {
  20.         height: 80px;
  21.         margin: 7px;
  22.         border: 1px solid #666;
  23.         border-radius: 4px;
  24.         box-shadow: 3px 3px 3px #bbb;
  25.     }
  26.     #outbox{
  27.         display: inline-block;
  28.         position: relative;
  29.         overflow: hidden;
  30.     }
  31.     #imgUpload{
  32.         position: absolute;
  33.         left: 0px;
  34.         font-size: 60px;
  35.         opacity: 0;
  36.     }
  37.     </style>
  38. </head>
  40. <body>
  41.     <div id="outbox">
  42.         <div id="dropbox">
  43.             <input id="imgUpload" type="file" multiple>
  44.             <span>点击或将单个/多个图片拖放到此处</span>
  45.         </div>
  46.     </div>
  47.     <div id="preview"></div>
  48.     <script>
  49.     var dropbox, imgUpload;
  51.     dropbox = document.getElementById("dropbox");
  52.     dropbox.addEventListener("dragenter", dragenter, false);
  53.     dropbox.addEventListener("dragover", dragover, false);
  54.     dropbox.addEventListener("dragleave", dragleave, false);
  55.     dropbox.addEventListener("drop", drop, false);
  57.     imgUpload = document.getElementById("imgUpload");
  58.     imgUpload.addEventListener("change", readFile, false)
  60.     // 目标进入drop区域
  61.     function dragenter(e) {
  62.         e.stopPropagation();
  63.         e.preventDefault();
  64.         dropbox.style.background = '#666'
  65.     }
  66.     // 目标位于drop区域上方
  67.     function dragover(e) {
  68.         e.stopPropagation();
  69.         e.preventDefault();
  70.     }
  71.     // 目标离开drop区域
  72.     function dragleave(e) {
  73.         e.stopPropagation();
  74.         e.preventDefault();
  75.         dropbox.style.background = '#fbfbfb';
  76.     }
  77.     // 目标在drop区域被释放/放置（松开鼠标）
  78.     function drop(e) {
  79.         e.stopPropagation();
  80.         e.preventDefault();
  81.         dropbox.style.background = '#fbfbfb';
  83.         var dt = e.dataTransfer;
  84.         var files = dt.files;
  86.         handleFiles(files);
  87.     }
  88.     // 点击上传按钮后的方法
  89.     function readFile() {
  90.         handleFiles(this.files);
  91.     }
  92.     // 显示缩略图的方法
  93.     function handleFiles(files) {
  94.         for (var i = 0; i < files.length; i++) {
  95.             var file = files[i];
  96.             var imageType = /^image\//;
  97.             // 自动过滤非图片文件
  98.             if (!imageType.test(file.type)) {
  99.                 continue;
  100.             }
  101.             // 建立img对象并加入到页面中
  102.             var img = document.createElement("img");
  103.             preview.appendChild(img);
  104.             var reader = new FileReader();
  105.             reader.readAsDataURL(file);
  106.             reader.onload = (function (aImg) {
  107.                 return function (e) {
  108.                     aImg.src = e.target.result;
  109.                 };
  110.             })(img);
  111.         }
  112.     }
  113.     </script>
  114. </body>
  116. </html>

访问演示地址