jquery实现本地图片上传预览和限流处理

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>HTML5 Upload</title>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        //前台处理获取到的图片并预览，前台限制图片的高度和宽度及其图片大小
        var src;
        //         //处理file input加载的图片文件
        $(document).ready(function (e) {
    //获取input图片宽高和大小
    function getImageWidthAndHeight(id, callback) {
        var _URL = window.URL || window.webkitURL;
        $("#" + "imgUpload").change(function (e) {
            var file, img;
            if ((file = this.files[0])) {
                img = new Image();
                img.onload = function () {
                    callback && callback({"width": this.width, "height": this.height, "filesize": file.size});
                };
                img.src = _URL.createObjectURL(file);
            }
        });
    }

    getImageWidthAndHeight('imgUpload', function (obj) {
        // //文件上传后本质上就是上传的一个文件对象的列表,获取上传的列表中的第一个
        var f = document.getElementById('imgUpload').files[0];
        //通过下面的方法将文件读成流的形式
        src = window.URL.createObjectURL(f);
        //生成图片的预览
        //判断图片的高度、宽度、大小
        var height = obj.height;
        var width = obj.width;
        var size = obj.size;
        var imageVaildInfo = vaildImage(height,width,size);
        //如果不正确,进行将之前的清楚
        if("success" !=imageVaildInfo ){
            alert(imageVaildInfo);
            $("#imgUpload").val("");
            return;
        }
        document.getElementById('imageView').style.height=height+"px";
        document.getElementById('imageView').style.width=width+"px";
        document.getElementById('imageView').src = src;
    });

    //图片的大小等信息的验证
            function vaildImage(height,width,size){
                var imageVaildInfo;
                if(height > 500){
                    imageVaildInfo = "你上传的图片已超出限定的图片高度,请重新上传!";
                 }else if(width > 500){
                    imageVaildInfo = "你上传的图片已超出限定的图片宽度,请重新上传!";
                }else{
                    imageVaildInfo = "success";
                }
            return imageVaildInfo;
            }

})


    </script>
</head>

<body>
<input type="file" id="imgUpload" name="imgUpload" draggable="true" single/> <!--允许file控件接受的文件类型-->
<!--<input type="file" id="imgUpload" name="imgUpload" accept="image/*" multiple/>-->
<img id="imageView" src="" style="width:500px;height:500px;border:1px solid #000000;"/>
</body>
</html>
jquery实现本地图片上传预览和限流处理

猜你喜欢
