<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>
分享到:
相关推荐
Html5FileReader文档 Html5FileReader文档 Html5FileReader文档
HTML5之FILEREADER的使用.pdf
FileReader文档
HTML5 FileReader接口学习笔记
javascript HTML5文件上传FileReader API_.docx
Filereader与Promise的搭配使用/JavaScript异步回调函数返回值 完美解决!!!!!!! 工作中项目需求:读取用户上传的Excel文件,并将Excel转换为json数据格式,然后上传至后台数据库。 问题点:Filereader中new ...
FileReader testpublic static String fileRead(String filePath){ StringBuilder result = new StringBuilder(); File src = new File(filePath); FileReader fread = null; BufferedReader re = null; ...
FileReader.js 封装了 HTML5 的 FileReader interface ,使用上更加简单。 浏览器支持: Internet Explorer: 10 Firefox: 10 Chrome: 13 Opera: 12 Safari: partial 标签:FileReader
前一篇文章介绍了HTML5中的Blob对象(详情戳这里),从中了解到Blob对象只是二进制数据的容器,本身并不能操作二进制,故本篇将对其操作对象FileReader进行介绍。 FileReader FileReader主要用于将文件内容读入内存...
纯前端实现图片上传预览(filereader ),HTML5 filereader 实现
主要介绍了JS+HTML5 FileReader对象用法,结合具体实例形式分析了FileReader对象的常用方法及简单使用技巧,需要的朋友可以参考下
给定一个HTML5 File对象(例如从HTML5拖放),将其转换为可读流。 安装 与npm和 $ npm install filereader-stream 例子 var drop = require ( 'drag-and-drop-files' ) var concat = require ( 'concat-stream' ) ...
主要介绍了HTML5 文件域+FileReader 分段读取文件并上传到服务器,需要的朋友可以参考下
文件上传功能现在是越来越普遍,所有的社交网站,媒体网站,比如优酷视频,微博等,都提供了上传图片,上传视频等功能。...这个FileReader API 的工作原理和 File API 一样,需要使用input[type=”f
基于H5的FileReader实现web端读取shp文件,CSV文件,文本文件坐标,并加载到地图上
本篇文章主要介绍了浅谈HTML5 FileReader分布读取文件以及其方法简介,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
ie9以下老浏览器不支持HTML5的解决方法
program for reading text file input is text file output is text tile
HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型。 FileReader的使用方式非常简单,可以按照如下步骤创建FileReader对象并...