html5图片上传

In this example below you will see how to do a html5图片上传 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 121595113, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 121595113 ©
  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>html5图片上传</title>
  
  
  
  
  
</head>

<body>

  <title>图片上传预览</title>
<input type="file" id="fileElem" multiple accept="image/*"  onchange="handleFiles(this)">
<div id="fileList"></div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/121595113/html5andx56feandx7247andx4e0aandx4f20-GoXEPv */
window.URL = window.URL || window.webkitURL;
var fileElem = document.getElementById("fileElem"),
  fileList = document.getElementById("fileList");

function handleFiles(obj) {
  var files = obj.files,
    img = new Image();
  if (window.URL) {
    //File API
    alert(files[0].name + "," + files[0].size + " bytes");
    img.src = window.URL.createObjectURL(files[0]); //创建一个object URL,并不是你的本地路径
    img.width = 200;
    img.onload = function(e) {
      window.URL.revokeObjectURL(this.src); //图片加载后,释放object URL
    }
    fileList.appendChild(img);
  } else if (window.FileReader) {
    //opera不支持createObjectURL/revokeObjectURL方法。我们用FileReader对象来处理
    var reader = new FileReader();
    reader.readAsDataURL(files[0]);
    reader.onload = function(e) {
      alert(files[0].name + "," + e.total + " bytes");
      img.src = this.result;
      img.width = 200;
      fileList.appendChild(img);
    }
  } else {
    //ie
    obj.select();
    obj.blur();
    var nfile = document.selection.createRange().text;
    document.selection.empty();
    img.src = nfile;
    img.width = 200;
    img.onload = function() {
      alert(nfile + "," + img.fileSize + " bytes");
    }
    fileList.appendChild(img);
    //fileList.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src='"+nfile+"')";
  }
}

Comments