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

本文实例讲述了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:

FileReader - Web API Interfaces | MDN

PS：这里再推荐几款加密解密相关在线工具供大家参考使用：

线编码转换工具(utf-8/utf-32/Punycode/Base64)：
http://tools.jb51.net/transcoding/decode_encode_tool

BASE64编码解码工具：
http://tools.jb51.net/transcoding/base64

图片转换为Base64编码在线工具：
http://tools.jb51.net/transcoding/img2base64

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

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jquery中Ajax用法总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

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

赞 (0)

相关推荐

  • JQuery+ajax实现批量上传图片(自写)

    JQuery+ajax实现批量上传图片(自写)

    在网上搜索了一下,发现以jquery+ajax方式实现单张图片上传的代码是有的,但实现批量上传图片的程序却没搜索到,于是根据搜索到的代码,写了一个可以批量上传的.先看效果图 点击增加按钮,会增加一个选择框,如下图: 选择要上传的图片,效果图如下: 上传成功如下图: 下面来看代码:前台html主要代码: 复制代码 代码如下: <button id="SubUpload" class="ManagerButton" onClick="TSubmitUpl

  • jQuery+ajax简单实现文件上传的方法

    本文实例讲述了jQuery+ajax简单实现文件上传的方法.分享给大家供大家参考,具体如下: 可以通过ajax来提交表单,而不会刷新页面.主要使用的方法是 $("#formID").ajaxSubmit()方法. 1.要引入js插件 需要下载的附件:jquery.form.js 2.页面代码: <script src="project/js/jquery.form.js" type="text/javascript"></scr

  • jQuery实现base64前台加密解密功能详解

    本文实例讲述了jQuery实现base64前台加密解密功能.分享给大家供大家参考,具体如下: 关于加密,很多人想到encodeURI和escape.这个对加密url,尤其是带中文参数的url很有用. 如果只是想做加密解密,类似于Java的DES,网上jQuery有个jquery.base64.js. (关于js的md5加密可以用jquery.md5.js,有兴趣可以找来测试一下). 下面是测试: <html> <head> <title></title> &

  • PHP+jQuery+Ajax实现多图片上传效果

    PHP+jQuery+Ajax实现多图片上传效果

    今天我给大家分享的是在不刷新页面的前提下,使用PHP+jQuery+Ajax实现多图片上传的效果.用户只需要点击选择要上传的图片,然后图片自动上传到服务器上并展示在页面上. HTML 我们在页面上放置一个form表单,使用post提交到后台php处理程序upload.php,注意enctype属性设置要支持文件上传.#preview用来显示上传完毕后的图片.关于css样式设置本文不加说明,请参照下载包的源码. 复制代码 代码如下: <form id="imageform" met

  • 基于jQuery Ajax实现上传文件

    本文实例为大家分享了基于jQuery Ajax实现上传文件的关键代码,供大家参考,具体内容如下 JS代码: //保存 function btnAdd() { var formData = new FormData($("#frm")[0]); $.ajax({ url: "/Admin/ContentManage/SaveEdit", type: "POST", data: formData, contentType: false, //必须fa

  • jQuery Ajax 上传文件处理方式介绍(推荐)

    jQuery Ajax 上传文件处理方式介绍(推荐)

    AJAX 是一种与服务器交换数据的技术,可以在补充在整个页面的情况下更新网页的一部分. 下面的表格列出了所有的 jQuery AJAX 方法: jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,接下来通过本文给大家介绍jquery ajax 上传文件处理方式. FormData对象 XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过J

  • jQuery Ajax文件上传(php)

    如何实现jQuery的Ajax文件上传,PHP如实文件上传.AJAX上传文件,PHP上传文件. [PHP文件上传] 在开始之前,我觉得是有必要把通WEB上传文件的原理简单说一下的.实际上,在这里不管是PHP,JSP,还是ASP处理上传的文件,其实都是WEB早已把文件上传到服务器了,我们只是运用上传处理函数来处理上传的文件.而处理函数一般都是用PHP,JSP,ASP等服务端语言来实现的.那么如何通过WEB(HTTP协议来上传文件呢?)你需要类似于以下的HTML代码:test.html 复制代码 代

  • jQuery Ajax使用FormData对象上传文件的方法

    jQuery Ajax使用FormData对象上传文件的方法

    FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用FormData对象 有详尽的FormData对象使用说明. 但上传文件部分只有底层的XMLHttpRequest对象发送上传请求,那么怎么通过jQuery的Ajax上传呢? 本文将介绍通过jQuery使用FormData对象上传文件. 使用<form>表单初始化FormData对象方式上传文件 HTM

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

    本文实例讲述了jQuery实现文件编码成base64并通过AJAX上传的方法.分享给大家供大家参考,具体如下: 使用AJAX是无法直接上传文件的,一般都是新建个iframe在它里面完成表单提交的过程以达到异步上传文件的效果. 如此做可以达到比较好的浏览器兼容性,不过代码量会比较大,即使是使用了文件上传插件,例如plupload. 如何能达到灵活的程度呢,能像普通的AJAX提交表单数据那样将文件看成是普通表单参数来对待就好了. 灵光一闪,利用javascript的FileReader对象将文件编码

  • 借助FileReader实现将文件编码为Base64后通过AJAX上传

    使用AJAX是无法直接上传文件的,一般都是新建个iframe在它里面完成表单提交的过程以达到异步上传文件的效果. 如此做可以达到比较好的浏览器兼容性,不过代码量会比较大,即使是使用了文件上传插件,例如plupload. 如何能达到灵活的程度呢,能像普通的AJAX提交表单数据那样将文件看成是普通表单参数来对待就好了. 灵光一闪,利用javascript的FileReader对象将文件编码成base64再传服务器不就行了么~ 开始动手,丰衣足食. 前端对文件进行base64编码并通过ajax向服务器

  • C#判断上传文件是否是图片以防止木马上传的方法

    很多时候木马程序会伪装成其他格式的文件上传到网站,最常见的如图片格式.本文就以C#为例讲述C#判断上传文件是否是图片以防止木马上传的方法,具体方法如下: 方法一:用image对象判断是否为图片 /// <summary> /// 判断文件是否为图片 /// </summary> /// <param name="path">文件的完整路径</param> /// <returns>返回结果</returns> pu

  • Vue项目中使用WebUploader实现文件上传的方法

    Vue项目中使用WebUploader实现文件上传的方法

    简介: WebUploader是由 Baidu WebFE(FEX) 团队开发的一个简单的以 HTML5为主 , FLASH为辅 的现代 文件上传组件 .在现代的浏览器里面能充分发挥HTML5的优势,同时又 不摒弃主流IE浏览器 ,沿用原来的FLASH运行时, 兼容IE6+,iOS 6+, android 4+ .两套运行时,同样的调用方式,可供用户任意选用.采用 大文件分片并发上传 ,极大的提高了文件上传效率. 分片.并发 分片 与 并发 结合,将一个大文件分割成多块, 并发上传 ,极大地提高

  • python将图片文件转换成base64编码的方法

    本文实例讲述了python将图片文件转换成base64编码的方法.分享给大家供大家参考.具体实现方法如下: import base64 f=open(r'c:\jb51.gif','rb') #二进制方式打开图文件 ls_f=base64.b64encode(f.read()) #读取文件内容,转换为base64编码 f.close() 调用方法如下: 复制代码 代码如下: <img src="R0lGODlh1wBOAPcAAAAAAP///7a4u+jq7bG1ucrN0N7g4tLU

  • JavaScript将base64图片转换成formData并通过AJAX提交的实现方法

    之前为了拍摄照片使用了webcam相关的插件,其拍摄后得到的是base64格式的图片,直接显示没问题,在src中直接指定就可以了,但是要上传到server时问题就来了,server端接收的是标准的文件,也就是html form中type="file"的形式.想要沿用这个接口不更改server端代码,于是尝试将base64直接转换成标准的fomeData并通过AJAX提交. 第一步,将base64转换成二进制图片(Blob) 主要思路是整理一下base64的前面几个字符,预处理以后转换成

  • php实现将wav文件转换成图像文件并在页面中显示的方法

    php实现将wav文件转换成图像文件并在页面中显示的方法

    本文实例讲述了php实现将wav文件转换成图像文件并在页面中显示的方法.分享给大家供大家参考.具体分析如下: 需求:将wav文件转换成png文件并且显示出来. Wav_To_Png.php: <?php function wav_graph($file, $f=0, $w=0) { global $DATA_DIR; if(!is_file($file)) return 0; $fp = fopen($DATA_DIR.$file, 'r'); $raw = fread($fp, 36); $s

  • jQuery.Form实现Ajax上传文件同时设置headers的方法

    废话不多说了,关于jquery form实现ajax上传文件的方法,大家参考一下实例代码吧: <span style="font-family: Arial, Helvetica, sans-serif;">function ajaxSubmitForm() {</span> var option = { url : cache.batchImport, type : 'POST', dataType : 'json', headers : {"tok

随机推荐