<html>
<head>
<meta charset="utf-8" />
<title>file test</title>
<script type="text/javascript">
(function(window) {
var zImgUtil = window.zImgUtil || {};
var handler = function(event, imgHolderDomId, maxWidth) {
if (!event) {
return;
}
event.stopPropagation();
event.preventDefault();
if (event.type == "drop") {
var data = event.dataTransfer;
if (!data) {
return;
}
if (!data.files || !data.files[0]) {
return;
}
var file = data.files[0];
var fileReader = new FileReader();
fileReader.onloadend = function () {
var data = this.result.substr(this.result.indexOf(',') + 1);
var imgId = "img" + new Date().getTime();
document.getElementById(imgHolderDomId).innerHTML = "<img id='" + imgId + "' src='data:" + file.type + ";base64," + data + "' />";
if (maxWidth) {
var imgDom = document.getElementById(imgId);
if (maxWidth < imgDom.width) {
var newHeight = maxWidth * imgDom.height / imgDom.width;
imgDom.style.width = maxWidth;
imgDom.style.height = newHeight;
}
}
};
fileReader.readAsDataURL(file);
}
};
zImgUtil.dropAndShow = function(dropOnDomId, imgHolderDomId, maxWidth) {
var srcDom = document.getElementById(dropOnDomId);
var handlerWrapper = function(event) {
handler(event, imgHolderDomId, maxWidth);
};
srcDom.addEventListener("drop", handlerWrapper, false);
srcDom.addEventListener("dragover", handlerWrapper, false);
srcDom.addEventListener("dragenter", handlerWrapper, false);
};
window.zImgUtil = zImgUtil;
})(window);
function init() {
zImgUtil.dropAndShow("srcLabel", "imgDiv", 200);
}
</script>
</head>
<body onload="init()">
<div id="srcLabel" style="border: 1px solid green;min-height: 100px;">
<label id="srcLabel">拖进框里面试试看</label>
<div id="imgDiv"></div>
</div>
</body>
</html>
分享到：
相关推荐
综上所述，HTML5 FileReader API是现代Web开发中处理本地文件的重要工具，它使得在浏览器环境中处理用户上传的文件变得更加灵活和便捷。结合前端框架如React、Vue或Angular，以及Ajax或Fetch API，可以构建出功能...
下面我们将详细介绍 FileReader 接口的使用方法和事件模型。 FileReader 接口的方法 FileReader 接口提供了四个方法： 1. readAsBinaryString(file)：将文件读取为二进制编码。 2. readAsText(file, [encoding])...
HTML5之FILEREADER的使用.pdf
HTML5 的 FileReader 接口是Web开发中处理文件读取的核心工具，它使得开发者能够异步访问用户设备上的文件，并且以多种格式进行读取。本文将深入探讨FileReader接口的使用方法及其在实际应用中的实例。 1. **...
Filereader与Promise的搭配使用/JavaScript异步回调函数返回值 完美解决！！！！！！！ 工作中项目需求：读取用户上传的Excel文件，并将Excel转换为json数据格式，然后上传至后台数据库。 问题点：Filereader中new ...
HTML5的FileReader API是现代Web开发中一个重要的特性，特别是在处理用户上传文件时，它提供了在客户端预处理文件的能力，极大地增强了用户体验和安全性。在传统的HTML表单上传中，文件上传过程通常涉及将文件完全...
FileReader API是HTML5提供的一种接口，用于读取Blob或File对象中的数据。它提供了多种读取方法，如readAsText、readAsDataURL和readAsArrayBuffer等，用于读取不同类型的数据。在读取过程中，可以监听`onload`、`on...
FileReader testpublic static String fileRead(String filePath){ StringBuilder result = new StringBuilder(); File src = new File(filePath); FileReader fread = null; BufferedReader re = null; ...
综上所述，HTML5的FileReader和Canvas为我们提供了强大的能力，可以轻松实现在前端进行图片预览和裁剪。结合适当的交互设计和事件处理，我们可以创建出符合用户需求的图片编辑功能。同时，了解相关的安全性和兼容性...
通过以上分析可以看出，利用JavaScript和HTML5的FileReader实现文件上传功能是一个涉及前端多个知识点的综合应用，从API的使用到事件处理，从安全性考量到用户体验优化，都是开发者在实际开发过程中需要认真对待的...
JavaScript（简称JS）是一种广泛使用的网页脚本语言，而HTML5是HTML标准的最新版本，引入了诸多新特性和API，其中包括FileReader对象。FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件（例如用户...
FileReader.js 封装了 HTML5 的 FileReader interface ，使用上更加简单。 浏览器支持： Internet Explorer: 10 Firefox: 10 Chrome: 13 Opera: 12 Safari: partial 标签：FileReader
HTML5提供了一个用于文件读取的API，即FileReader接口，它允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用FileReader可以实现文件的分布读取，这对于处理大文件时，可以有效减少...
对于那些使用IE9及以下版本的老用户来说，由于这些浏览器对HTML5的支持非常有限甚至不支持，这将直接影响到网站的功能性和用户体验。本文将探讨如何解决这一问题，并提供一些实用的方法。 #### 一、理解HTML5与IE9...
给定一个HTML5 File对象（例如从HTML5拖放），将其转换为可读流。 安装 与npm和 $ npm install filereader-stream 例子 var drop = require ( 'drag-and-drop-files' ) var concat = require ( 'concat-stream' ) ...
HTML5 引入了 FileReader API，使得在用户实际上传文件之前，开发者可以获取到文件的详细信息，从而进行预处理，验证和优化，避免了不必要的安全风险和资源浪费。 在 HTML 代码中，我们通常会使用 `...
HTML5在现代网页开发中扮演着重要角色，尤其在处理用户交互和数据传输方面。其中，HTML5的File API提供了一种强大而灵活的方式，使得开发者可以实现多文件图片预览和上传功能。在这个实例中，我们将探讨如何利用...