javascript 预览本地图片

---

title: 预览本地图片

---

File input

<input id="upload_image" type="file" name="image" accept="image/*" />

accept=”image/*”, 指定弹框可选取的文件类型

js例子

$('#upload_image').change(function(event) {
  const files = event.target.files;
  const file = files[0]; // 图片对象
  const imageSize = file.size; //图片文件大小
  const lastNo = file.name.lastIndexOf('.');
  const imgNameExtension = file.name.substring(lastNo).toLowerCase(); //文件后最名
  const URL = window.URL || window.webkitURL;
  let imgURL;
  if (URL) {
    imgURL = URL.createObjectURL(file)
  }
  if (imgURL) {
    const img = new Image();
    img.src = imgURL
    img.onerror = function() {
     // 如果不是图片这里处理
    }
    img.onload = function() {
      // 如果是图片这里处理
        $('div').append($('<img/>').attr('src', imgURL));
    }
  }
});