基于 base64 实现跨域上传

跨域上传文件是一件让人头疼的事情，不过今天我们可以用一种简单的方法解决。

需要：

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);