概述

在页面中上传时，之前一般都是需要使用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后写入文件。

转载于:https://www.cnblogs.com/yg_zhang/p/9997395.html

HTML5 通过 FileReader 实现文件上传相关推荐

HTML5结合ajax实现文件上传以及进度显示
基于原生html5实现,不需要falsh支持,进度可以自定义显示,控制灵活, 本来打算使用jquery插件进行异步文件上传,比如uploadfy但是需要额外的支持,也有人用iframe模仿异步上传机制 ...
html5 ajax 文件上传,html5+FormData 实现ajax文件上传
大家都知道在html4时代,上传只能使用表单post提交方式,无法使用ajax(XMLHttpRequest )直接进行表单提交.但在HTML 5的概念形成后,W3C开始考虑标准化XMLHttpReq ...
html5 如何实现客户端验证上传文件的大小
在HTML 5中,现在可以在客户端进行文件上传时的校验了,比如用户选择文件后,可以马上校验文件的大小和属性等.本文章向码农介绍html5 如何实现客户端验证上传文件的大小,感兴趣的码农可以参考一下. ...
ajax文件插件上传,7 款基于 JavaScript/AJAX 的文件上传插件
本文整理了7款基于JavaScript和AJAX的文件上传插件,这些插件基本上都能实现以下功能: 多文件上传拖拽操作实时上传进度自定义上传限制希望能为你的开发工作带来帮助. 具有多文件上传.拖 ...
iframe ajax上传,ajax--iframe模拟ajax文件上传效果
js无权读取本地的文件,so不能上传文件但是有这几种方法 1 iframe伪装 jquery-uploaded-file 2 swf插件 (这个不讲,是一个单独的软件 3 html5 iframe模 ...
ajax文件上传data,ajax文件上传-FormData()
HTML: JS: $("input[type='button']").on('click', upfile); /** * [upfile 文件上传] * @return {[O ...
html5 txt文件上传,JavaScript html5利用FileReader实现上传功能
本文实例为大家分享了H5利用FileReader上传文件的具体代码,供大家参考,具体内容如下 1. Html部分文件上传演练 Browse... 2. JS部分 var result = docum ...
php处理html5文件上传代码,HTML5中文件上传的代码
这篇文章给大家分享的内容是关于HTML5中文件上传的代码,有一定的参考价值,有需要的朋友可以从参考一下,希望对你有所帮助.XHR2上传二进制文件 html代码: javascript代码:functi ...
【HTML5初探之form标签】解放表单验证、增加文件上传、集成拖放
导航 [初探HTML5之使用新标签布局]用html5布局我的博客页! [HTML5初探之form标签]解放表单验证.增加文件上传.集成拖放 [HTML5初探之绘制图像(上)]看我canvas元素引领下 ...

HTML5 通过 FileReader 实现文件上传

概述

实现代码

1.前端JS代码

HTML5 通过 FileReader 实现文件上传相关推荐

最新文章

热门文章