借助FileReader实现将文件编码为Base64后通过AJAX上传
更新时间：2015年12月24日 15:24:22 投稿：goldensun
这篇文章主要介绍了借助FileReader实现将文件编码为Base64后通过AJAX上传的方法,包括后端对文件数据解码并保存的PHP代码,需要的朋友可以参考下
使用AJAX是无法直接上传文件的，一般都是新建个iframe在它里面完成表单提交的过程以达到异步上传文件的效果。
如此做可以达到比较好的浏览器兼容性，不过代码量会比较大，即使是使用了文件上传插件，例如plupload。
如何能达到灵活的程度呢，能像普通的AJAX提交表单数据那样将文件看成是普通表单参数来对待就好了。
灵光一闪，利用javascript的FileReader对象将文件编码成base64再传服务器不就行了么~
开始动手，丰衣足食。
前端对文件进行base64编码并通过ajax向服务器传输：
<head>
<meta charset="UTF-8">
</head>
<form onsubmit="return false;">
<input type="hidden" name="file_base64" id="file_base64">
<input type="file" id="fileup">
<input type="submit" value="submit" onclick="$.post('./uploader.php', $(this).parent().serialize());">
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#fileup").change(function(){
var v = $(this).val();
var reader = new FileReader();
reader.readAsDataURL(this.files[0]);
reader.onload = function(e){
console.log(e.target.result);
$('#file_base64').val(e.target.result);
};
});
});
</script>
后端对文件数据解码并保存：
<?php
if (isset($_POST['file_base64'])){
$file_base64 = $_POST['file_base64'];
$file_base64 = preg_replace('/data:.*;base64,/i', '', $file_base64);
$file_base64 = base64_decode($file_base64);
file_put_contents('./file.save', $file_base64);
}
javascript里的FileReader对象主流浏览器都支持，IE10以上支持，私认为在为小范围提供服务时可以考虑这个异步上传文件的方式，省时又省力，兼容IE系列另当别论。
您可能感兴趣的文章:
- JavaSctit 利用FileReader和滤镜上传图片预览功能
- JavaScript中的FileReader图片预览上传功能实现代码
- JS+HTML5 FileReader实现文件上传前本地预览功能
- JavaScript html5利用FileReader实现上传功能
- 基于JavaScript FileReader上传图片显示本地链接
- javascript HTML5文件上传FileReader API
- 谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
- javascript结合fileReader 实现上传图片
- File, FileReader 和 Ajax 文件上传实例分析(php)
- JavaScript使用FileReader实现图片上传预览效果
相关文章
这篇文章主要介绍了基于javascript的无缝滚动动画实现，文章通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
本文主要分享了利用canvas如何绘制圆形时钟的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要介绍了javascript随机显示背景图片的方法,涉及javascript随机数的生成及页面元素的操作技巧,需要的朋友可以参考下2015-06-06
这篇文章主要介绍了JS处理json日期格式化问题的相关资料,需要的朋友可以参考下2015-10-10
这篇文章主要为大家详细介绍了原生JS实现简单计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
JavaScript OOP类与继承实现代码，需要的朋友可以参考下。2009-11-11
本章节讨论使用ES6编码风格到代码中需要注意的点。通过记住这些关键点，可以让我们写出更优美的、可读性更强的JavaScript ES6风格的代码。2021-05-05
基于RequireJS和JQuery的模块化编程日常问题解析
本文是小编日常收集整理些有关RequireJS和JQuery的模块化编程，感兴趣的朋友一起学习吧2016-04-04
定义一个id="flower"的div元素 并设置如上样式,我们的目标就是通过javascript来获取样式的最终属性2010-04-04
最近微信小程序对于审核小程序提出了带有wx.login、wx.getUserInfo接口的调整，并提出了一个新的接口供开发者调用，本文就详细的介绍一下如何使用，感兴趣的可以了解一下2021-06-06
最新评论