借助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 相关文章推荐
《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型
Feb 27 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
Jul 22 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
Aug 22 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
Sep 05 Javascript
Bootstrap轮播插件使用代码
Oct 11 Javascript
浅析jQuery操作select控件的取值和设值
Dec 07 Javascript
jQuery插件zTree实现删除树节点的方法示例
Mar 08 Javascript
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
Express的HTTP重定向到HTTPS的方法
Jun 06 Javascript
react+redux仿微信聊天界面
Jun 21 Javascript
微信小程序request请求封装,验签代码实例
Dec 04 Javascript
小程序实现左滑删除的效果的实例代码
Oct 19 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生成带有雪花背景的验证码
2008/09/28 PHP
php在服务器执行exec命令失败的解决方法
2012/03/03 PHP
jquery使用append(content)方法注意事项分享
2014/01/06 Javascript
js实现鼠标划过给div加透明度的方法
2015/05/25 Javascript
超赞的动手创建JavaScript框架的详细教程
2015/06/30 Javascript
javascript学习之json入门
2016/12/22 Javascript
ES6概念 Symbol.keyFor()方法
2016/12/25 Javascript
Jquery实现跨域异步上传文件总结
2017/02/03 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
2017/06/16 Javascript
Vue实现一个返回顶部backToTop组件
2017/07/25 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
2018/09/27 Javascript
小程序实现留言板
2018/11/02 Javascript
[08:04]TI4西雅图DOTA2前线报道 海涛探访各路人马
2014/07/09 DOTA
python socket网络编程步骤详解(socket套接字使用)
2013/12/06 Python
Python中使用strip()方法删除字符串中空格的教程
2015/05/20 Python
Python中functools模块的常用函数解析
2016/06/30 Python
在 Python 应用中使用 MongoDB的方法
2017/01/05 Python
儿童编程python入门
2018/05/08 Python
caffe binaryproto 与 npy相互转换的实例讲解
2018/07/09 Python
对Python _取log的几种方式小结
2019/07/25 Python
python sqlite的Row对象操作示例
2019/09/11 Python
Python自动化xpath实现自动抢票抢货
2020/09/19 Python
Python绘图实现台风路径可视化代码实例
2020/10/23 Python
python实现经典排序算法的示例代码
2021/02/07 Python
美体小铺英国官网:The Body Shop英国
2017/01/24 全球购物
你所知道的集合类都有哪些?主要方法?
2012/12/31 面试题
公司授权委托书范本
2014/09/18 职场文书
县政府领导班子“四风”方面突出问题整改措施
2014/09/23 职场文书
2014法院四风问题对照检查材料思想汇报
2014/10/04 职场文书
党的群众路线教育实践活动个人对照检查材料(四风)
2014/11/05 职场文书
2014年校长工作总结
2014/12/11 职场文书
2015年12.4全国法制宣传日活动总结
2015/03/24 职场文书
毛主席纪念堂观后感
2015/06/17 职场文书
《日月潭》教学反思
2016/02/20 职场文书
2016年精神文明建设先进个人事迹材料
2016/02/29 职场文书
使用Pytorch训练two-head网络的操作
2021/05/28 Python