1、HTML部分
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--<input id="input" onchange="change()" type="file"></input>--> <img id="img" src="img/1.png" width="50px" height="50px" /> <output id="result"></output> </body> </html>
2、JS部分
<script> var img = document.getElementById("img"); var result1 = document.getElementById("result"); window.onload = function() { load(); } function load(){ loadImageToBlob(img.src, function(blobFile) {//這里的img.src改地址 if(!blobFile) return false;
//生成二進制流
var fileReader = new FileReader();
fileReader.readAsDataURL(blobFile);
fileReader.onload = function() {
console.log(this.result);//這里輸出的數據放到url里能生成圖片，或者post回后台生成mp3，二進制流
};
//生成url可以用於頁面顯示
result1.innerHTML = '<a download href="' + window.URL.createObjectURL(blobFile) + '" target="_blank">文件下載</a>'; }); } var loadImageToBlob = function(url, callback) { if(!url || !callback) return false; var xhr = new XMLHttpRequest(); xhr.open('get', url, true); xhr.responseType = 'blob'; xhr.onload = function() { // 注意這里的this.response 是一個blob對象 就是文件對象 callback(this.status == 200 ? this.response : false); } xhr.send(); return true; } </script>
3、PHP后台操作
// （this.result） 前端傳回來的 $data = $_POST['data']; $data = $this->base64_to_blob($data); if(is_array($data)){ $data = reset($data); } $filename = time().'.mp3'; //后綴是mp3格式的文件名 $path = 路徑.'/'.(date('Y/m/d',TIME)).$filename; //正式圖片的路徑 uploadObject($data,$path); //存儲到雲服務器或者本地 //save到本地，圖片路徑是$path;