借助FileReader實現(xiàn)將文件編碼為Base64后通過AJAX上傳
使用AJAX是無法直接上傳文件的,一般都是新建個iframe在它里面完成表單提交的過程以達到異步上傳文件的效果。
如此做可以達到比較好的瀏覽器兼容性,不過代碼量會比較大,即使是使用了文件上傳插件,例如plupload。
如何能達到靈活的程度呢,能像普通的AJAX提交表單數(shù)據(jù)那樣將文件看成是普通表單參數(shù)來對待就好了。
靈光一閃,利用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>
后端對文件數(shù)據(jù)解碼并保存:
<?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系列另當別論。
- JavaSctit 利用FileReader和濾鏡上傳圖片預覽功能
- JavaScript中的FileReader圖片預覽上傳功能實現(xiàn)代碼
- JS+HTML5 FileReader實現(xiàn)文件上傳前本地預覽功能
- JavaScript html5利用FileReader實現(xiàn)上傳功能
- 基于JavaScript FileReader上傳圖片顯示本地鏈接
- javascript HTML5文件上傳FileReader API
- 談談基于iframe、FormData、FileReader三種無刷新上傳文件的方法
- javascript結合fileReader 實現(xiàn)上傳圖片
- File, FileReader 和 Ajax 文件上傳實例分析(php)
- JavaScript使用FileReader實現(xiàn)圖片上傳預覽效果
相關文章
一步一步封裝自己的HtmlHelper組件BootstrapHelper(三)
一步一步封裝自己的HtmlHelper組件:BootstrapHelper,系列文章第三篇,感興趣的小伙伴們可以參考一下2016-09-09js生成隨機數(shù)之random函數(shù)隨機示例
js生成隨機數(shù)可以使用JavaScript Math.random()內(nèi)置函數(shù),下面有個不錯的示例,大家可以嘗試操作下2013-12-12'webpack-dev-server'?不是內(nèi)部或外部命令也不是可運行的程序?或批處理文件的最
這篇文章主要介紹了'webpack-dev-server'?不是內(nèi)部或外部命令也不是可運行的程序?或批處理文件的最新解決方法,文中給大家補充介紹了webpack-dev-server的介紹與用法,需要的朋友可以參考下2023-02-02require導入module.exports 或 exports導出的使用方法
module.exports用于導出整個模塊的內(nèi)容,可以通過賦值給 module.exports 導出一個對象、函數(shù)或值,導出的內(nèi)容可以被其他模塊通過require 導入,本文給大家介紹require導入module.exports 或 exports導出的使用,感興趣的朋友一起看看吧2023-11-11