HTML多图预览上传+css设置

最新推荐文章于 2021-06-27 18:53:56 发布

原创最新推荐文章于 2021-06-27 18:53:56 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#picture

本文介绍了如何使用HTML、CSS和JavaScript实现多图预览上传功能，并通过CSS美化文件输入按钮，使其变得隐蔽且样式美观。通过JavaScript的FileReader API进行图片预览，支持不同浏览器的兼容处理。

1.HTML

<body>
    <div class="pic-upload" >
  <div class="pic-select">上传图片(3张)
   <input id="pic-choose" type="file" name="file" multiple="multiple"  onchange="Previews();" accept="image/*" />
  </div>
     <div id="pic-show" ></div>
 </div>
</body>

2.CSS

本身file的input本身很难改成好看的样式，我们可以通过设置高宽，将其透明度opacity设置为0，当需要将z-index设置在最上层。

```

3.Javascript
===========
```
<script type="text/javascript">
//下面用于多图片上传预览功能
function Previews(avalue) {
  var docObj = document.getElementById("pic-choose");
  var dd = document.getElementById("pic-show");
  docObj.style.border="1px solid red";
  dd.innerHTML = "";
  var fileList = docObj.files;
  for(var i = 0; i < fileList.length; i++) {
  dd.innerHTML += "<div style='float:left' > <img id='img" + i + "' /> </div>";
  var imgObjPreview = document.getElementById("img" + i);
  if(docObj.files && docObj.files[i]) {
   //火狐下，直接设img属性
   imgObjPreview.style.display = 'block';
   imgObjPreview.style.width = '100px';
   imgObjPreview.style.height = '100px';
   //imgObjPreview.src = docObj.files[0].getAsDataURL();
   //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
   imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]);
  }
  else {
      //IE下，使用滤镜
   docObj.select();
   var imgSrc = document.selection.createRange().text;
   alert(imgSrc)
   var localImagId = document.getElementById("img" + i);
   //必须设置初始大小
   localImagId.style.width = "100px";
   localImagId.style.height = "100px";
   //图片异常的捕捉，防止用户修改后缀来伪造图片
   try {
       localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
    localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
   } catch(e) {
    alert("您上传的图片格式不正确，请重新选择!");
     return false;
   }
    imgObjPreview.style.display = 'none';
    document.selection.empty();
   }
   }
    return true;
  }
  </script>
```