手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >借助FileReader实现将文件编码为Base64后通过AJAX上传
借助FileReader实现将文件编码为Base64后通过AJAX上传
摘要:使用AJAX是无法直接上传文件的,一般都是新建个iframe在它里面完成表单提交的过程以达到异步上传文件的效果。如此做可以达到比较好的浏览器...

使用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"> </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系列另当别论。

【借助FileReader实现将文件编码为Base64后通过AJAX上传】相关文章:

JS+CSS实现的拖动分页效果实例

简单介绍JavaScript的变量和数据类型

收集整理的四个方向的滚动

JavaScript数组去重的3种方法和代码实例

nodejs怎么简单实现中英文翻译

jQuery实现仿腾讯微博滑出效果报告每日天气的方法

Node.js实现JS文件合并小工具

jQuery实现转动随机数抽奖效果的方法

js控制网页前进和后退的方法

JavaScript中的条件判断语句使用详解

精品推荐
分类导航