代码改变世界

jquery实现异步读取图片上传图片到服务器

2016-01-05 15:25  爱情香烟  阅读(931)  评论(0)  编辑  收藏  举报

跨域

我们知道JS和服务端交互有跨域的问题，要解决跨域问题有两种方案

1、使用JSONP协议

2、在服务端解决，比如，如果web服务器使用的是nginx可以在配置文件里添加

add_header "Access-Control-Allow-origin" http://xxx.com;

 前端H5代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="//cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.js"></script>
</head>
<body>

<form>
    <input id="input" type="file">

    <input type="button" onclick="uploadFile();" name="ffff" value="rerer">
</form>

<script>

    function uploadFile()
    {
        var selected_file = document.getElementById('input').files[0];
        var reader = new FileReader();
        reader.onloadend = function(e) {
            var bin = e.target.result;
            var data = {
                "image_binary":bin
            };
            $.ajax({
                type: 'POST',
                url: "http://xxxx/Image/UploadImage",
                data: data,
            });
        };
        reader.readAsDataURL(selected_file);
    }



</script>
</body>
</html>

以上代码使用了jqery的http post请求，另外就是使用了FileReader

注意：reader.onloadend 代码读取文件完成后触发

 服务端代码

    public static function saveBinaryImage($binaryImage)
    {

        list($type, $data) = explode(',', $binaryImage);
        if(strstr($type,'image/jpeg')!==''){
            $ext = '.jpg';
        }elseif(strstr($type,'image/gif')!==''){
            $ext = '.gif';
        }elseif(strstr($type,'image/png')!==''){
            $ext = '.png';
        }
        $filename  = "dxxxxxxx";
        $trueFile = $filename . $ext;
        file_put_contents($trueFile , base64_decode($data), true);
        $imageInfo = getimagesize($trueFile);
        $imageWidth = $imageInfo[0];
        $imageHiegh = $imageInfo[1];
        if(!$imageWidth || !$imageHiegh)
        {
            return false;
        }
    }