HTML5基础知识 - JavaScript API - File - 读取文件为DataURL

使用FileReader类的readAsDataURL方法来读取文件内容为base64编码的字符串。

file

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 3221
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

// Content section used alot
var content = document.getElementById('content');

if (!window.FileReader) {
 content.innerHTML = "This browser doesnt support the File API";
} else {
 // Page Layout
 content.innerHTML =
 'Pick an image file or drag one into this area <input type="file" id="file" />' +
 'Content: <img id="file-content" />' +
 '';

// Input handler
  document.getElementById('file').onchange = function() {
    readFileAsDataURL(this.files[0]);
  };

// Drag and drop methods
  content.ondragover = function(e) {
    e.preventDefault();
    return false;
  };
  content.ondrop = function(event) {
    e.stopPropagation();
    readFileAsDataURL(event.dataTransfer.files[0]);
    return false;
  };
    
  function readFileAsDataURL(file) {
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(event) {
      document.getElementById('file-content').src = 
        event.target.result;
    };
    reader.onerror = function() {
      document.getElementById('file-content').innerHTML = 'Unable to read ' + file.fileName;
    };
  }
}

编译

CSS

HTML

使用FileReader类的readAsDataURL方法来读取文件内容为base64编码的字符串。

file

编辑器支持Emmet

快捷键

使用FileReader类的readAsDataURL方法来读取文件内容为base64编码的字符串。

file

HTML5 CSS3带上传列表和进度动画的多文件上传控件

HTML5 性感的微博/微信个人网页模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：