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使用正则验证15/18身份证的方法示例
Apr 27 jQuery
jQuery正则验证注册页面经典实例
Jun 10 jQuery
jquery拖动改变div大小
Jul 04 jQuery
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
Jquery 获取相同NAME 或者id删除行操作
Aug 24 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基础学习之流程控制的实现分析
2013/04/28 PHP
解析php通过cookies获取远程网页的指定代码
2013/06/25 PHP
PHP利用超级全局变量$_GET来接收表单数据的实例
2016/11/05 PHP
javascript中负数算术右移、逻辑右移的奥秘探索
2013/10/17 Javascript
require.js深入了解 require.js特性介绍
2014/09/04 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
2015/08/27 Javascript
多种JQuery循环滚动文字图片效果代码
2020/06/23 Javascript
JQuery对ASP.NET MVC数据进行更新删除
2016/07/13 Javascript
js 将图片连接转换成base64格式的简单实例
2016/08/10 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
2016/12/15 Javascript
Vue2组件tree实现无限级树形菜单
2017/03/29 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
2017/04/08 jQuery
微信小程序之数据双向绑定与数据操作
2017/05/12 Javascript
Vue实现PopupWindow组件详解
2018/04/28 Javascript
npm 更改默认全局路径以及国内镜像的方法
2018/05/16 Javascript
jQuery常见的遍历DOM操作详解
2018/09/05 jQuery
javascript将非数值转换为数值
2018/09/13 Javascript
python数据库操作常用功能使用详解(创建表/插入数据/获取数据)
2013/12/06 Python
pymssql数据库操作MSSQL2005实例分析
2015/05/25 Python
使用Python从零开始撸一个区块链
2018/03/14 Python
在python win系统下 打开TXT文件的实例
2018/04/29 Python
Python基于多线程实现ping扫描功能示例
2018/07/23 Python
python安装本地whl的实例步骤
2019/10/12 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
python中pandas库中DataFrame对行和列的操作使用方法示例
2020/06/14 Python
pandas实现导出数据的四种方式
2020/12/13 Python
英国最大的独立摄影零售商:Park Cameras
2019/11/27 全球购物
水产养殖学应届生求职信
2013/09/29 职场文书
保卫科工作岗位职责
2014/03/01 职场文书
安全生产目标责任书
2014/04/14 职场文书
优秀教导主任事迹材料
2014/05/09 职场文书
体育节口号
2014/06/19 职场文书
2014年教研员工作总结
2014/12/23 职场文书
个人年终总结怎么写
2015/03/09 职场文书
小程序实现文字循环滚动动画
2021/06/14 Javascript
Golang ort 中的sortInts 方法
2022/04/24 Golang