Drop Here

  1. <input type="file" onchange="upload(this)" /></p>
  2. <div id="dropbox" style="height: 100px; width: 100px; border: 1px solid black;">Drop Here</div>
  3. <div id="filecontent"></div>
  1. function upload(myfile) {
  2. var file = myfile.files[0];
  3. if (window.FileReader) {
  4. var fr = new FileReader();
  5. fr.readAsText(file, "gb2312");
  6. fr.onload = function (e) {
  7. document.getElementById("filecontent").innerHTML = this.result;
  8. }
  9. }
  10. else {
  11. alert("Not supported by your browser!");
  12. }
  13. }
  14.  
  15. var dropbox = document.getElementById("dropbox");
  16. dropbox.addEventListener("dragenter", dragenter, false);
  17. dropbox.addEventListener("dragover", dragover, false);
  18. dropbox.addEventListener("drop", drop, false);
  19. function dragenter(e) {
  20. e.stopPropagation();
  21. e.preventDefault();
  22. }
  23. function dragover(e) {
  24. e.stopPropagation();
  25. e.preventDefault();
  26. }
  27. function drop(e) {
  28. e.stopPropagation();
  29. e.preventDefault();
  30. var dt = e.dataTransfer;
  31. var files = dt.files;
  32. if (files.length) {
  33. var file = files[0];
  34. var fr = new FileReader();
  35. fr.onload = function () {
  36. document.getElementById("filecontent").innerHTML = this.result;
  37. };
  38. fr.readAsText(file, "gb2312");
  39. }
  40. }

H5文件操作api--持续完善中的更多相关文章

  1. H5文件操作API

    引言 在之前我们操作本地文件都是使用flash.silverlight或者第三方的activeX插件等技术,由于使用了这些技术后就很难进行跨平台.或者跨浏览器.跨设备等情况下实现统一的表现,从另外一个 ...

  2. 2018年最新Java面试题及答案整理(持续完善中…)

    2018年最新Java面试题及答案整理(持续完善中…) 基础篇 基本功 面向对象特征 封装,继承,多态和抽象 封装封装给对象提供了隐藏内部特性和行为的能力.对象提供一些能被其他对象访问的方法来改变它内 ...

  3. paip.复制文件 文件操作 api的设计uapi java python php 最佳实践

    paip.复制文件 文件操作 api的设计uapi java python php 最佳实践 =====uapi   copy() =====java的无,要自己写... ====php   copy ...

  4. HTML5文件操作API

    HTML5文件操作API       一.文件操作API 在之前我们操作本地文件都是使用flash.silverlight或者第三方的activeX插件等技术,由于使用了这些技术后就很难进行跨平台.或 ...

  5. 文件的概念以及VC里的一些文件操作API简介

    文件的基本概念 所谓“文件”是指一组相关数据的有序集合. 这个数据集有一个名称,叫做文件名. 实际上在前面的各章中我们已经多次使用了文件,例如源程序文件.目标文件.可执行文件.库文件 (头文件)等.文 ...

  6. Html5 学习系列(四)文件操作API

    原文:Html5 学习系列(四)文件操作API 引言 在之前我们操作本地文件都是使用flash.silverlight或者第三方的activeX插件等技术,由于使用了这些技术后就很难进行跨平台.或者跨 ...

  7. 重新想象 Windows 8 Store Apps (24) - 文件系统: Application Data 中的文件操作, Package 中的文件操作, 可移动存储中的文件操作

    原文:重新想象 Windows 8 Store Apps (24) - 文件系统: Application Data 中的文件操作, Package 中的文件操作, 可移动存储中的文件操作 [源码下载 ...

  8. linux 命令学习(持续完善中...)

    linux 命令学习(持续完善中...) 主要是记录一些开发过程中用到的linux命令,慢慢补充 一.用户 1.添加用户: useradd 用户名 2.设置密码:passwd 用户名 ,然后按照提示输 ...

  9. Java文件操作API功能与Windows DOS命令和Linux Shell 命令类比

    Java文件操作API功能与Windows DOS命令和Linux Shell 命令类比: Unix/Linux (Bash) Windows(MS-DOS) Java 进入目录 cd cd - 创建 ...

随机推荐

  1. express中的路由

    一.读取静态文件 基本代码: "use strict"; const express = require("express"); let app = expre ...

  2. 清理SYSAUX表空间

    1.查看SYSAUX表空间中数据分布情况 col SEGMENT_NAME for a30 set lines 999 select * from (select segment_name,PARTI ...

  3. C# ORM中Dto Linq Expression 和 数据库Model Linq Expression之间的转换

    今天在百度知道中看到一个问题,研究了一会便回答了: http://zhidao.baidu.com/question/920461189016484459.html 如何使dto linq 表达式转换 ...

  4. ceshi

    % void CLASS cam_xyz_coeff (float rgb_cam[3][4], double cam_xyz[4][3]) % { % double cam_rgb[4][3], i ...

  5. Mac 显示隐藏文件

    defaults write com.apple.finder AppleShowAllFiles -bool true 此命令显示隐藏文件defaults write com.apple.finde ...

  6. asp.net执行SqlServer存储过程!(详解!)

    ASP.NET执行存储过程 一. 执行一个没有参数的存储过程的代码如下: connectionString为连接字符串 SqlConnection conn=new SqlConnection(con ...

  7. jQuery判断checked的三种方法

    今天在查看他人源码时看到在判断复选框是否选中时,与自己的写法不同: .is(":checked") vs .prop("checked") == true 因此 ...

  8. (转) JAVA中如何设置图片(图标)自适应Jlable等组件的大小

    一.问题: 一个程序,组件上设置某个图片作为图标,因为的label(应该说是组件)已经设定了固定大小, 所以再打开一些大图片时,超过组件大小的部分没显示出来,而小图片又没填充完整个组件 二.解决这个问 ...

  9. Java工程师层级

  10. [spring源码学习]十、IOC源码-conversionService

    一.代码示例 1.我们在之前的Person类里新增一个两个属性,分别是客户的兴趣和生日,兴趣爱好有很多,我们使用list进行保存,生日使用日期进行保存 public class Person { pr ...