jquery實現本地圖片上傳預覽和限流處理

時間 2019-11-10

原文原文鏈接

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。