input 文件上传实现本地预览

最新推荐文章于 2024-07-12 15:49:20 发布

weixin_30301183

最新推荐文章于 2024-07-12 15:49:20 发布

阅读量579

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/rosendolu/p/11219800.html

版权

上传图片
- 本地预览
- 获取图片大小
上传视频
- 本地预览
- 获取视频 duration
- 视频大小

图片上传

主要涉及内容
- input accept
- filesList
- URL.createObjectURL()
- URL.revokeObjectURL()

input file

<label for='upload'></label> //  ::before :: after  用于扩展可点击区域
<input type="file" id="upload" accept="image/*" onchange="upload(this.files)" >  // 'video/*' 'audio/*'  'image/*'

获取 filsList对象

const selectedFile = document.getElementById('upload').files[0];

onchange="upload(this.files)"  

const inputElement = document.getElementById("upload");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
  const fileList = this.files;  // Filelist 对象
}

自定义上传框

隐藏input 框使用 click 方法

<input type="file" id="upload"  accept="image/*" style="display:none">
<button id="uploadBox">click to select files </button>

const inup = documnet.querySelector('#upload');
const inputBox = documnet.querySelector('#uploadBox');

inputBox.addEventListener("click", function (e) {
  if (input) {
    input.click();
  }
}, false);

label

<input type="file" id="upload"  accept="image/*" class="visually-hidden">
<button id="uploadBox">click to select files </button>

// 不能使用 hidden display:none; 隐藏元素
// 使用定位  clicp  || opcacity:0  ...

.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

::before ::after

// 不能使用 opacity hidden display:none 
// 使用定位 + overfollow:hidden
.upload::before {  
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 background:whitesmoke;
 width: 100%;
 height: 100%;
}

使用URL 对象实现本地预览

const url = window.URL.createObjectURL(files[i])
let img = documnet.createElement('img');
img.src = url;
img.height = 100;
img.onload = function() {
  window.URL.revokeObjectURL(this.src);
}

视频上传

获取 fileList 对象的方式、预览跟上传图片一样这里主要介绍一下获取视频 duration

<label for='upload'></label> //  ::before :: after  用于扩展可点击区域
<input type="file" id="upload" accept="video/*" onchange="upload(this.files)" >  // 'video/*' 'audio/*'  'image/*'


const input = document.querySelector('#upload');
function handleInput() {
  const { files } = this;

  const video = document.createElement('video');

  // preload = 'metadata'
  video.preload = 'metadata';
  video.src = window.URL.createObjectURL(files[0]);


  function loadMetaData(params) {
    // 要实现本地预览则可以不用 revoke
    window.URL.revokeObjectURL(video.src);

    const { duration } = video;

    console.log('? video duration ', duration);
  }
  // 监听 loadmetadata 事件
  video.addEventListener('loadedmetadata', loadMetaData, false);

  input.append(video);
}
input.addEventListener('change', handleInput, false);

参考：

转载于:https://www.cnblogs.com/rosendolu/p/11219800.html