借助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 面向对象,实现namespace,class,继承,重载
Oct 29 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
Apr 16 Javascript
JS实现一个列表中包含上移下移删除等功能
Sep 24 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
Oct 20 Javascript
Highcharts入门之基本属性
Aug 02 Javascript
AngularJs concepts详解及示例代码
Sep 01 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
Mar 21 Javascript
小程序云开发教程如何使用云函数实现点赞功能
May 18 Javascript
如何解决日期函数new Date()浏览器兼容性问题
Sep 11 Javascript
p5.js码绘“跳动的小正方形”的实现代码
Oct 22 Javascript
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
前端监听websocket消息并实时弹出(实例代码)
Nov 27 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
日本十大最佳动漫,全都是二次元的神级作品
2019/10/05 日漫
php封装json通信接口详解及实例
2017/03/07 PHP
Ubuntu 16.04下安装PHP 7过程详解
2017/03/28 PHP
PHP使用DOM对XML解析处理操作示例
2019/07/04 PHP
CL vs ForZe BO5 第三场 2.13
2021/03/10 DOTA
a标签的href和onclick 的事件的区别介绍
2013/07/26 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
2014/04/30 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
2014/05/04 Javascript
jQuery函数map()和each()介绍及异同点分析
2014/11/08 Javascript
JavaScript实现获取dom中class的方法
2015/02/09 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
浅谈JavaScript 覆盖原型以及更改原型
2016/08/31 Javascript
Javascript中call,apply,bind方法的详解与总结
2016/12/12 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
2017/03/22 Javascript
VUE中v-model和v-for指令详解
2017/06/23 Javascript
[01:03:13]VG vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[02:05:03]完美世界DOTA2联赛循环赛 LBZS VS Matador BO2 10.28
2020/10/28 DOTA
Python实现聊天机器人的示例代码
2018/07/09 Python
Python global全局变量函数详解
2018/09/18 Python
HTML5中的Scoped属性使用实例
2014/04/23 HTML / CSS
新加坡交友网站:be2新加坡
2019/04/10 全球购物
消防安全检查制度
2014/02/04 职场文书
经济管理毕业生求职信
2014/03/15 职场文书
大二学生学年自我鉴定
2014/09/12 职场文书
社会体育专业大学生职业生涯规划书
2014/09/17 职场文书
员工试用期自我评价
2014/09/18 职场文书
公务员学习习总书记“三严三实”思想汇报
2014/09/19 职场文书
个人作风建设总结
2014/10/23 职场文书
2014年化验员工作总结
2014/11/18 职场文书
幼儿园中秋节活动总结
2015/03/23 职场文书
答谢酒会主持词
2015/07/02 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
学习党章心得体会2016
2016/01/15 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书
Python提取PDF指定内容并生成新文件
2021/06/09 Python
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
2021/06/29 Javascript