html5实现简单上传图片

February 6, 2018

622 views

2556 words

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title></title>
<style>
        div{width: 100%;}
        .logo img{display:block; margin:0 auto;}
        .upload{position: relative;width: 80px;height: 18px;line-height: 18px;background: #2fc7c9;text-align: center;
            color: #FFF;padding: 0px 5px;-webkit-border-radius: 2px;border-radius: 2px;
            margin: 0 auto;
        }
        .upload form{width:100%;position:absolute; left:0; top:0;opacity:0; filter:alpha(opacity=0);}
        .upload form input{width: 100%;}
    </style>
</head>
<body>
<script src="http://www.bjpowernode.com/Public/home/index1/js/jquery-1.2.6.min.js"></script>
<script>
    window.fileSelected = function(obj) {
        var _this = $(obj);
        var file = document.getElementById('imageFile').files[0];
        console.log(file);
        var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;
        if(!rFilter.test(file.type)) {
            alert("文件格式必须为图片");
            return;
        }
        /*开始进行网络加载*/
        _this.css("display", "none");    //目的是为了屏蔽点击事件
        var reader = new FileReader() , image = new Image() ,
            canvas = document.createElement("canvas") , ctx = canvas.getContext("2d");
        reader.onload = function() {        //文件加载完成
            var url = reader.result;
            image.src = url;
        };
        image.onload = function() {        //图片加载完成
            var w = image.naturalWidth , h = image.naturalHeight ,
                scale = 3;        //图片缩放比例，这里是把图片大小高宽均缩小3倍
            canvas.width = w / scale;
            canvas.height = h / scale;
            ctx.drawImage(image, 0 , 0 , w , h, 0 ,0, canvas.width , canvas.height);
            fileUpload();
        };
        reader.readAsDataURL(file);        //用文件加载器加载文件
        function fileUpload() {        //文件上传方法
            var quality = 0.3;        //图片的质量，这里设置的是0.3
            var data = canvas.toDataURL("image/jpeg", quality);//获取画布图片，并且要jpg格式
            data = data.split(',')[1];
            data = window.atob(data);
            var ia = new Uint8Array(data.length);
            for(var i = 0; i < data.length; i++) {
                ia[i] = data.charCodeAt(i);
            }
            var blob = new Blob([ia], {            //以上均为二进制参数处理，从而获取一个blob对象
                type: "image/jpeg"
            });

            console.log(blob);
            var fd = new FormData(document.getElementById("uploadForm"));
            fd.append("file" , blob ,"upload.jpg");    //向form中加入图片数据，name属性是XXX，文件名是upload.jpg
            var xhr = new XMLHttpRequest();
            xhr.addEventListener('load', function(resUpload) {
                _this.css("display", "");
                //请求成功
            }, false);
            xhr.addEventListener('error', function(){
                _this.css("display", "");
                //请求失败
            }, false);
            xhr.addEventListener('abort', function(){
                _this.css("display", "");
                //上传终止
            }, false);
            xhr.open('POST', "http://localhost/info.php");//请求地址
            xhr.send(fd);//发送
        }
    };
</script>

<div class="logo">
    <img src="img/1.jpg" />
</div>
<div class="upload">
    <p>上传图片</p>
        <!--设置file的input的透明度为0解决样式难看问题-->
    <form id="uploadForm" enctype="multipart/form-data" method="post" action="XXXXXX">
        <input type="file" name="imageFile" id="imageFile"  onchange="fileSelected(this);" />
        <input hidden="hidden" name="param" value="test" />

    </form>
</div>
</body>
</html>

html5实现简单上传图片