借助FileReader实现将文件编码为Base64后通过AJAX上传


Posted in Javascript onDecember 24, 2015

使用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系列另当别论。

Javascript 相关文章推荐
jQuery插件开发基础简单介绍
Jan 07 Javascript
js和jquery对dom节点的操作(创建/追加)
Apr 21 Javascript
JS 添加千分位与去掉千分位的示例
Jul 11 Javascript
javascript解析json数据的3种方式
May 08 Javascript
node.js中的http.response.removeHeader方法使用说明
Dec 14 Javascript
JS获取当前脚本文件的绝对路径
Mar 02 Javascript
jQuery回调方法使用示例
Jun 26 jQuery
Vue计算属性的使用
Aug 04 Javascript
webpack2.0配置postcss-loader的方法
Aug 17 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
Mar 28 Javascript
Openlayers3实现车辆轨迹回放功能
Sep 29 Javascript
Vue实现boradcast和dispatch的示例
Nov 13 Javascript
javascript与jquery中的this关键字用法实例分析
Dec 24 #Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
Dec 24 #Javascript
jQuery中hover与mouseover和mouseout的区别分析
Dec 24 #Javascript
基于JS2Image实现圣诞树代码
Dec 24 #Javascript
jquery读写cookie操作实例分析
Dec 24 #Javascript
jquery.cookie实现的客户端购物车操作实例
Dec 24 #Javascript
jQuery基于cookie实现的购物车实例分析
Dec 24 #Javascript
You might like
PHP中VC6、VC9、TS、NTS版本的区别与用法详解
2013/10/26 PHP
php结合安卓客户端实现查询交互实例
2015/05/05 PHP
PHP提高编程效率的20个要点
2015/09/23 PHP
php实用代码片段整理
2016/11/12 PHP
推荐20家国外的脚本下载网站
2011/04/28 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
对于this和$(this)的个人理解
2013/09/08 Javascript
如何让DIV可编辑、可拖动示例代码
2013/09/18 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
2014/09/03 Javascript
JavaScript中计算网页中某个元素的位置
2015/06/10 Javascript
jQuery实现伪分页的方法分享
2016/02/17 Javascript
javascript的列表切换【实现代码】
2016/05/03 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
2017/02/13 Javascript
jQuery:unbind方法的使用详解
2017/08/14 jQuery
AngularJS 中ui-view传参的实例详解
2017/08/25 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
2018/02/11 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
2019/07/09 Javascript
GitHub 热门:Python 算法大全,Star 超过 2 万
2019/04/29 Python
利用python计算时间差(返回天数)
2019/09/07 Python
Python ORM框架Peewee用法详解
2020/04/29 Python
Python中如何引入第三方模块
2020/05/27 Python
CSS3按钮鼠标悬浮实现光圈效果源码
2016/09/11 HTML / CSS
html5 自定义播放器核心代码
2013/12/20 HTML / CSS
Merrell迈乐澳大利亚网站:购买户外登山鞋
2017/05/28 全球购物
英国现代绅士品牌:Hackett
2017/12/17 全球购物
Luxplus丹麦:香水和个人护理折扣
2018/04/23 全球购物
三个儿子教学反思
2014/02/03 职场文书
酒店管理专业自荐信
2014/05/23 职场文书
幼儿发展评估方案
2014/06/11 职场文书
购房协议书范本(无房产证)
2014/10/07 职场文书
老公婚前保证书
2015/02/28 职场文书
课题研究阶段性总结
2015/08/13 职场文书
Nginx中break与last的区别详析
2021/03/31 Servers
25张裸眼3D图片,带你重温童年的记忆,感受3D的魅力
2022/02/06 杂记
详解Golang如何优雅的终止一个服务
2022/03/21 Golang