概述

在页面中上传时,之前一般都是需要使用form表单进行上传。html5 中提供了FileReader 可以将文件转换成Base64编码字符串,因此就可以直接使用

AJAX实现文件上传。

实现代码

1.前端JS代码

var url= /*[[@{/sys/upload}]]*/ ;
function uploadFile(){
var file = document.getElementById("file").files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
// ajax 上传图片
$.post(url, { data: e.target.result},function(ret){
console.info(ret);
},'json');
}
}

2.后端代码

@RequestMapping("/sys/upload")
public JSONObject upload(HttpServletRequest request) {
JSONObject json=new JSONObject();
String data=request.getParameter("data"); int idx=data.indexOf(",");
String fileBase64=data.substring(idx+1);
byte[] fileBytes= Base64.decodeBase64(fileBase64); writeByte("d:\\file.jar", fileBytes); json.put("success", true); return json;
}

在后端代码接收的是base64 编码,转换成bytes后写入文件。

HTML5 通过 FileReader 实现文件上传的更多相关文章

  1. Resumable.js – 基于 HTML5 File API 的文件上传

    Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...

  2. HTML5 进阶系列:文件上传下载

    前言 HTML5 中提供的文件API在前端中有着丰富的应用,上传.下载.读取内容等在日常的交互中很常见.而且在各个浏览器的兼容也比较好,包括移动端,除了 IE 只支持 IE10 以上的版本.想要更好地 ...

  3. Java Web使用Html5 FormData实现多文件上传

    前一阵子,迭代一个线上的项目,其中有一个图片上传的功能,之前用的ajaxfileupload.js来实现上传的,不过由于ajaxfileupload.js,默认是单文件上传(虽然可以通过修改源码的方法 ...

  4. HTML5 + AJAX ( jQuery版本 ) 文件上传带进度条

    页面技术:HTML5 + AJAX ( jQuery) 后台技术:Servlet 3.0 服务器:Tomcat 7.0 jQuery版本:1.9.1 Servlet 3.0 代码 package or ...

  5. html5实现拖拽文件上传

    以下是自学it网--中级班上课笔记 网址:www.zixue.it html文件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict ...

  6. HTML5 之 FileReader(图片上传)

    1.FileReader接口的方法 FileReader接口有4个方法,其中3个用来读取文件,另一个用来中断读取.无论读取成功或失败,方法并不会返回读取结果,这一结果存储在result属性中. Fil ...

  7. AJAX文件上传实践与分析,带HTML5文件上传API。

    对于HTML5已经支持AJAX文件上传了,但如果需要兼容的话还是得用一点小技巧的,HTML5等等介绍,先来看看以前我们是怎么写的. 网上可能会有一些叫AJAX文件上传插件,但在AJAX2.0之前是不可 ...

  8. HTML5 + AJAX ( 原生JavaScript ) 异步多文件上传

    这是在上篇 HTML5 + AJAX ( jQuery版本 ) 文件上传带进度条 的修改版本.后台代码不变就可以接着使用,但是脚本不再使用jQuery了,改为原生的 JavaScript 代码,所以我 ...

  9. 7 款基于 JavaScript/AJAX 的文件上传插件

    本文整理了7款基于JavaScript和AJAX的文件上传插件,这些插件基本上都能实现以下功能: 多文件上传 拖拽操作 实时上传进度 自定义上传限制 希望能为你的开发工作带来帮助. 1.  jQuer ...

随机推荐

  1. goto,void,extern,sizeof分析

    goto: 程序的质量与goto出现的次数成反比,禁用 goto的副作用:破环了程序的结构化的顺序执行的过程,它有可能会跳过程序的应该执行的一些步骤. void: 修饰函数返回值和参数 c语言中没有定 ...

  2. @RequestBody使用须知

    -----------------------siwuxie095                                 @RequestBody 使用须知         使用 @Requ ...

  3. TZOJ 2018 SPF(连通图割点和分成的连通块)

    描述 Consider the two networks shown below. Assuming that data moves around these networks only betwee ...

  4. go语言中的并发

    package main; import ( "fmt" "runtime" "sync" ) //goruntine奉行通过通信来共享内存 ...

  5. 使用gearman进行异步的邮件或短信发送

    一.准备工作 1.为了防止,处理业务途中出现的宕机,请配置好gearman的持久化方式.2.使用gearmanManager来管理我们的worker脚本,方便测试. 上述两条请看我之前写的两篇文章 二 ...

  6. Sqlserver的身份验证模式

    1.服务器名称: . 在服务器名称这里,我们有以下几种选择来连接到本地: (1)默认的服务器名称:也就是电脑主机的名称 (2)".",“.”就表示主机. (3)localhost ...

  7. [z]nativeSql

    http://blog.csdn.net/chenallen1025/article/details/9169543 EntityManager API 提供了创建 Query 实例以执行原生 SQL ...

  8. 3F - Lowest Common Multiple Plus

    求n个数的最小公倍数. Input 输入包含多个测试实例,每个测试实例的开始是一个正整数n,然后是n个正整数. Output 为每组测试数据输出它们的最小公倍数,每个测试实例的输出占一行.你可以假设最 ...

  9. Java中方法的重写

    ★★前提:方法的重写建立在继承关系上★★ 在Java程序中,类的继承关系可以产生一个子类,子类继承父类,它具备了父类所有的特征,继承了父类所有的方法和变量. 所谓方法的重写是指子类中的方法与父类中继承 ...

  10. linux日志查找技巧

    1.查找日志最后10行 tail -n test.log 查询日志尾部最后10行的日志; 2.关键词查询 grep '2014-12-17 16:17:20' test.log