jQuery实现文件编码成base64并通过AJAX上传的方法


Posted in jQuery onApril 12, 2018

本文实例讲述了jQuery实现文件编码成base64并通过AJAX上传的方法。分享给大家供大家参考,具体如下:

使用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://libs.baidu.com/jquery/2.0.0/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系列另当别论。

Reference:

BASE64编码解码工具:
http://tools.3water.com/transcoding/base64

图片转换为Base64编码在线工具:
http://tools.3water.com/transcoding/img2base64

在线MD5/hash/SHA-1/SHA-2/SHA-256/SHA-512/SHA-3/RIPEMD-160加密工具:
http://tools.3water.com/password/hash_md5_sha

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
JQuery实现定时刷新功能代码
May 09 jQuery
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
Jquery EasyUI $.Parser
Jun 02 jQuery
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
Jquery获取radio选中值实例总结
Jan 17 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
jQuery操作事件完整实例分析
Jan 10 jQuery
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
JavaScript枚举选择jquery插件代码实例
Nov 17 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 #jQuery
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 #jQuery
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 #jQuery
jQuery中复合选择器简单用法示例
Mar 31 #jQuery
jQuery中内容过滤器简单用法示例
Mar 31 #jQuery
jQuery中可见性过滤器简单用法示例
Mar 31 #jQuery
jQuery实现的上传图片本地预览效果简单示例
Mar 29 #jQuery
You might like
PHP set_time_limit(0)长连接的实现分析
2010/03/02 PHP
php批量上传的实现代码
2013/06/09 PHP
PHP实现Huffman编码/解码的示例代码
2018/04/20 PHP
thinkphp5框架实现的自定义扩展类操作示例
2019/05/16 PHP
ThinkPHP5.1框架数据库链接和增删改查操作示例
2019/08/03 PHP
解决laravel groupBy 对查询结果进行分组出现的问题
2019/10/09 PHP
Nigma vs Liquid BO3 第二场2.14
2021/03/10 DOTA
学习ExtJS Panel常用方法
2009/10/07 Javascript
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
JavaScript 函数replace深入了解
2013/03/14 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
2014/08/04 Javascript
jQuery实用函数用法总结
2014/08/29 Javascript
nodejs命令行参数处理模块commander使用实例
2014/09/17 NodeJs
JavaScript中使用document.write向页面输出内容实例
2014/10/16 Javascript
jquery通过ajax加载一段文本内容的方法
2015/01/15 Javascript
jQuery应用之jQuery链用法实例
2015/01/19 Javascript
轻松实现javascript数据双向绑定
2015/11/11 Javascript
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
[05:26]TI10典藏宝瓶套装外观展示
2020/07/03 DOTA
用实例分析Python中method的参数传递过程
2015/04/02 Python
详解python的几种标准输出重定向方式
2016/08/15 Python
浅谈pandas dataframe对除数是零的处理
2020/07/20 Python
python 制作网站筛选工具(附源码)
2021/01/21 Python
Sunglasses Shop德国站:欧洲排名第一的太阳镜网站
2017/08/01 全球购物
物流专业大学应届生求职信
2013/11/03 职场文书
毕业生自荐书模版
2014/01/04 职场文书
党员公开承诺践诺书
2014/03/25 职场文书
班级学雷锋活动总结
2014/06/26 职场文书
小学生志愿者活动方案
2014/08/23 职场文书
起诉离婚协议书样本
2014/11/25 职场文书
2015年电话销售工作总结范文
2015/04/20 职场文书
起诉书格式范文
2015/05/20 职场文书
幼儿园亲子活动感想
2015/08/07 职场文书
Python下opencv使用hough变换检测直线与圆
2021/06/18 Python