借助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 相关文章推荐
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
Apr 12 Javascript
Javascript 面向对象 继承
May 13 Javascript
javascript Window及document对象详细整理
Jan 12 Javascript
分享27个jQuery 表单插件集合推荐
Apr 25 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
Feb 04 Javascript
Egret引擎开发指南之编译项目
Sep 03 Javascript
简介AngularJS的视图功能应用
Jun 17 Javascript
javascript实现数字倒计时特效
Mar 30 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
May 27 Javascript
深入理解逻辑表达式的用法 与或非的用法
Jun 06 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
Nov 28 Javascript
this.$toast() 了解一下?
Apr 18 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实现MVC开发得最简单的方法――模型
2007/04/10 PHP
PHP中使用json数据格式定义字面量对象的方法
2014/08/20 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
PHP中危险的file_put_contents函数详解
2017/11/04 PHP
用于自动添加Digg This!按钮的JavaScript
2006/12/23 Javascript
jQuery 扩展对input的一些操作方法
2009/10/30 Javascript
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
2012/01/13 Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
2013/05/06 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
2014/06/05 Javascript
使用jQuery.wechat构建微信WEB应用
2014/10/09 Javascript
jQuery后代选择器用法实例
2014/12/23 Javascript
js实现class样式的修改、添加及删除的方法
2015/01/20 Javascript
7个去伪存真的JavaScript面试题
2016/01/07 Javascript
javascript中利用柯里化函数实现bind方法
2016/04/29 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
2016/05/12 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
2016/06/14 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
2016/07/28 Javascript
基于AngularJS实现iOS8自带的计算器
2016/09/12 Javascript
Python实现网站文件的全备份和差异备份
2014/11/30 Python
用Python编写脚本使IE实现代理上网的教程
2015/04/23 Python
Python实现的对一个数进行因式分解操作示例
2019/06/27 Python
python简单实现9宫格图片实例
2020/09/03 Python
CSS3属性box-shadow使用指南
2014/12/09 HTML / CSS
Jar包的作用是什么
2014/03/30 面试题
餐饮主管岗位职责
2013/12/10 职场文书
初中校园广播稿
2014/02/02 职场文书
运动会开幕式邀请函
2014/02/03 职场文书
《母亲的恩情》教学反思
2014/02/13 职场文书
《再见了,亲人》教学反思
2014/02/26 职场文书
新闻学专业大学生职业生涯规划范文
2014/03/02 职场文书
民主生活会对照检查材料范文
2014/10/01 职场文书
年度考核登记表个人总结
2015/03/06 职场文书
2016新年感言
2015/08/03 职场文书
建筑工程挂靠协议书
2016/03/23 职场文书
Python绘制分类图的方法
2021/04/20 Python