跨域上傳檔案是一件讓人頭疼的事情，不過今天我們可以用一種簡單的方法解決。直接上程式碼！

需要

js 檔案

(function () {
    window.onload = function(){
        var input = document.getElementById("demo_input");
        var result= document.getElementById("result");
        var img_area = document.getElementById("img_area");
        if ( typeof(FileReader
 
) === 'undefined' ){
            result.innerHTML = "抱歉，你的瀏覽器不支援 FileReader，請使用現代瀏覽器操作！";
            input.setAttribute('disabled','disabled');
        }else{
            input.addEventListener('change',readFile,false);
        }
    };
    function readFile(){
        var file = this.files[0];
        // 正則匹配圖片，可根據實際情況修改
        if(!/image\/\w+/.test(file
 
.type)){
            alert("請確保檔案為影象型別");
            return false;
        }
        var reader = new FileReader();
        reader.readAsDataURL(file);
        console.log();
        reader.onload = function(e){
            $('.userImg').attr('src', this.result); // 替換頁面圖片
        }
    }
})();

HTML 頁面：

<!-- 可以提交地址或路由直接寫在action中，利用iframe可以實現無跳轉 -->
<form id="avatar" target="upload_photo_iframe" action="" method="post">
    <input type="file" value="" id="demo_input" style="display:none"/>
    <textarea style="display:none" name="img" id="result" rows=30 cols=300></textarea>
    <input type="submit" value="提交" style="display: none;">
</form>

<iframe id="update_photo_iframe" name="upload_photo_iframe" style="display: none;"></iframe>

控制器程式碼，也可寫入 PHP 檔案中，放在上傳檔案儲存的目錄：

// $img 為獲取到的圖片base64碼
$base64_url=$img;
$base64_body = substr(strstr($base64_url,','),1);
$data= base64_decode($base64_body );
$newName = time() . '_' . rand(1,999) . '.jpg';
file_put_contents(config('app.avatar') . '/' . $newName,$data);