概述

在页面中上传时,之前一般都是需要使用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. robotium—只有apk文件的测试

    把ppt的内容总结一下,并把问题说明一下: 把基本步骤搞出来,用notepad的程序吧,直接安装apk,就当做是不知道源码就好啦! 直接用自己的手机上就行啦!! 一.重签名: 步骤: 1.直接运行re ...

  2. 关于json.stringify的注意事项

    今天通过navigator.getCurrentPosition中的success回调,用json.stringify打印postion时,怎么打印都只是一个{}, 而打印postion.coords ...

  3. docker搭建lnmp(一)

    因为安装过程中涉及到一些修改配置文件的步骤,由于刚尝试不太会,所以这里都是通过安装好后,进入容器修改配置,最后退出重启容器. 目录结构 docker ├── mysql │   └── dockerf ...

  4. What's the #pragma pack

    What's the #pragma pack 这是一个预编译宏, 目前我对于它的认识是: 告诉编译器对于某些结构进行字节对齐使用的. 目前阶段,几乎不使用, 只是见到了, 有疑问, 先简单学习记录一 ...

  5. odroid xu4

    1, sd 2, flashing image 3, GParted 4, ROS install 5, make an image sudo dd if=/dev/sdb of=~/odroid/o ...

  6. PC初始化

    @charset "utf-8"; /* CSS Document */ html{width:%;font-family: ;padding: ;} a{color:#;text ...

  7. IOS安卓常见问题

    一.IOS自带safari浏览器   1.safari不支持fixed+input输入框.   解决方案: http://www.haorooms.com/post/ios_fixed_input   ...

  8. Varnish 入门

    本文将介绍 varnish 的工作流程,安装以及 varnish 的配置三个方面的内容.首先简单的介绍 varnish 以及其工作流程,大概了解其内部原理,然后介绍了 varnish 的安装方法,最后 ...

  9. Linux_(3)Shell编程(上)

    一.shell 简介Shell 是一个用 C 语言编写的程序,它是用户使用 Linux 的桥梁.Shell 既是一种命令语言,又是一种程序设计语言.Shell 是指一种应用程序,这个应用程序提供了一个 ...

  10. 分析入口文件main.php

    在分析之前,需要了解php cli模式下的编程 1.了解getopt函数,php手册地址:http://php.net/manual/zh/function.getopt.php static pri ...