HTML5 通过 FileReader 实现文件上传
概述
在页面中上传时,之前一般都是需要使用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 实现文件上传的更多相关文章
- Resumable.js – 基于 HTML5 File API 的文件上传
Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...
- HTML5 进阶系列:文件上传下载
前言 HTML5 中提供的文件API在前端中有着丰富的应用,上传.下载.读取内容等在日常的交互中很常见.而且在各个浏览器的兼容也比较好,包括移动端,除了 IE 只支持 IE10 以上的版本.想要更好地 ...
- Java Web使用Html5 FormData实现多文件上传
前一阵子,迭代一个线上的项目,其中有一个图片上传的功能,之前用的ajaxfileupload.js来实现上传的,不过由于ajaxfileupload.js,默认是单文件上传(虽然可以通过修改源码的方法 ...
- HTML5 + AJAX ( jQuery版本 ) 文件上传带进度条
页面技术:HTML5 + AJAX ( jQuery) 后台技术:Servlet 3.0 服务器:Tomcat 7.0 jQuery版本:1.9.1 Servlet 3.0 代码 package or ...
- html5实现拖拽文件上传
以下是自学it网--中级班上课笔记 网址:www.zixue.it html文件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict ...
- HTML5 之 FileReader(图片上传)
1.FileReader接口的方法 FileReader接口有4个方法,其中3个用来读取文件,另一个用来中断读取.无论读取成功或失败,方法并不会返回读取结果,这一结果存储在result属性中. Fil ...
- AJAX文件上传实践与分析,带HTML5文件上传API。
对于HTML5已经支持AJAX文件上传了,但如果需要兼容的话还是得用一点小技巧的,HTML5等等介绍,先来看看以前我们是怎么写的. 网上可能会有一些叫AJAX文件上传插件,但在AJAX2.0之前是不可 ...
- HTML5 + AJAX ( 原生JavaScript ) 异步多文件上传
这是在上篇 HTML5 + AJAX ( jQuery版本 ) 文件上传带进度条 的修改版本.后台代码不变就可以接着使用,但是脚本不再使用jQuery了,改为原生的 JavaScript 代码,所以我 ...
- 7 款基于 JavaScript/AJAX 的文件上传插件
本文整理了7款基于JavaScript和AJAX的文件上传插件,这些插件基本上都能实现以下功能: 多文件上传 拖拽操作 实时上传进度 自定义上传限制 希望能为你的开发工作带来帮助. 1. jQuer ...
随机推荐
- sqlserver判断字段是否存在更改字段
use naire go if COL_LENGTH('options','optionsGroup') is null begin--options为表名,optionsGroup为列名 alter ...
- EasyUI Dialog 对话框默认不弹出和关闭清空对话框内容
EasyUI中文网: http://www.jeasyui.net/plugins/181.html 默认不弹出:closed:true 模式化窗口(有遮罩):modal:true <div c ...
- 整合使用持久层框架mybatis 使用SqlSessionTemplate模板类与使用映射接口 对比
spring中整合使用mybatis的用法总结 一:在Spring配置Mybatis 第一步:将mybatis-spring类包添加 到项目的类库中 第二步:编写spring和持久层衔接的xml文件, ...
- 安装SQLserver2008r2出现 试图执行未经授权的操作
安装时取消对兼容模式的勾选,重新安装就可以了. 或者加上 以管理员身份运行,兼容性设置,以管理员身份运行
- day 13 模块
模块 一个py文件,就是一个模块,一个模块是一些相似功能的集合体. # echo.py 定义一个模块. 下文都用这个 print('from echo 模块') name = 'echo' def f ...
- mysql 数据库名称,中间带有中划线问题
插入数据时候,引用了数据库名,数据库名中有横线,会提示错误: You have an error in your SQL syntax; check the manual that correspon ...
- ES6 Decorator 修饰器
目的: 修改类的一种方法,修饰器是一个函数 编译: 安装 babel-plugin-transform-decortators-legacy .babelrd plugins: [&quo ...
- YII2中分页组件的使用
当数据过多,无法一页显示时,我们经常会用到分页组件,YII2中已经帮我们封装好了分页组件. 首先我们创建操作数据表的AR模型: <?php namespace app\models; use y ...
- html5的地理位置定位
html5提供的地理位置定位使开发人员不用借助其他软件就能轻松实现位置查找,地图应用,导航等功能. 地理位置定位基本原理GPS, WIFI, IP, 手机信号基站 核心对象Geolocation是wi ...
- mysql数据库存储经度纬度
使用float或者double会自动四舍五入,用decimal(20,17)当然你用varchar也是可以的