js前端上传文件缩略图技巧示例详解

<form action="">
    <input type="file" name="file">
</form>

<script>
    const inp = document.querySelector("input")
    inp.onchange = function(e) {
      console.log(e.target.files);
    }
</script>

const input = document.getElementById('input');
const output = document.getElementById('output');
input.addEventListener('change', (e) => {
output.innerText = `文件的大小为${e.target.files[0].size}`;
});

var blob = new Blob().slice([start [, end [, contentType]]]};
/*
- start 开始位置的下标
- end 结束位置的下标
- contentType 给新的Blob赋予一个新的文档类型。这将会把它的 type 属性设为被传入的值。它的默认值是一个空的字符串
*/

const input = document.getElementById('input');
input.addEventListener('change', (e) => {
  let file = e.target.files[0]
  if(file.size > 4 * 1024 * 1024 || file.type != "image/jpeg"){
      alert("文件不得大于4M，且图片格式要为jpg格式。")
  }
});

var fr = new FileReader();

fr.readAsDataURL(blob)
/*
- blob,被读取的 blob 或 file对象
*/

fr.readAsDataURL(blob)
/*
- blob,被读取的 blob 或 file对象
*/

<input type="file" onchange="previewFile()">
<img src="" height="200">
<script>
function previewFile(e) {
  var img = document.querySelector('img');
  let file = e.target.files[0];
  let fr = new FileReader();
  reader.readAsDataURL(file);
  fr.addEventListener("load", function () {
    img.src = fr.result;
  });
}
</script>

<!-- 
application/x-www-form-urlencoded 在发送前编码所有字符（默认）
multipart/form-data  不对字符编码。在使用包含文件上传控件的表单时，必须使用该值
text/plain           空格转换为 "+" 加号，但不对特殊字符编码。
-->
<form action="/upload" enctype="multipart/form-data" method="post">
    <input type="text" name="username">
    <input type="password" name="password">
    <input type="file" name="file">
    <input type="submit">
</form>

function previewFile(e) {
    const formdata = new FormData()
    formData.append("userAvatar", e.target.files[0]);
}
/*
    第一个值为文件名称，第二个值为要传送的文件对象/字符串
*/

function previewFile(e) {
  let file = e.target.files[0];
  let formdata = new FormData()
  formdata.append("userAva", file)    // 注意，若要实现大文件分片上传时，同一个文件分片的文件名要相同，方便后端拼接
  axios.post("http://localhost/...", {
      data: formdata
  }).then( res => {
      console.log(res)
  )
}

<form action="">
  <input type="file" name="file"><br/>
  <img src="" alt="">
</form>
<script>
  const inp = document.querySelector("input")
  const img = document.querySelector("img")
  const fr = new FileReader()
  inp.onchange = function(e) {
    let file = e.target.files[0]
    fr.readAsDataURL(file)
  }
  fr.onload = function() {
    img.src = fr.result
  }
</script>