js显示上传图片的缩略图、验证上传文件的格式、验证上传文件大小、验证图片宽、高

本文链接：https://blog.youkuaiyun.com/cj_zyz/article/details/72768237

本文介绍如何使用JavaScript实现图片上传预览功能，并验证图片格式、大小及尺寸，确保符合特定要求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js显示上传图片的缩略图、验证上传文件的格式、验证上传文件大小、验证图片宽、高

作为刚入职几个月的小萌新，接到的其中一个需求，就是做OA首页广告位的图片功能，虽然增删改查很简单，不过就难在上传图片和显示图片这个地方。我最不擅长，最讨厌的就是上传功能。不过最后也解决了。今天的文章，主要是显示图片缩略图和系列验证功能。也让我耗费了1天工作日的时间，主要是请教项目组的大佬，在百度上找大佬的文章、博客。因为这功能我以前没弄过。（最后再上功能需求图）

上代码，用google浏览器，可用

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>  
<c:set var="ctx" value="${pageContext.request.contextPath}" />  
<html>  
<head>  
<title></title>  
<script type="text/javascript" src="${ctx }/jquery/jquery-1.8.3.js"></script>  
<script type="text/javascript">  


    //下面用于图片上传预览功能、后缀名判断、文件大小、图片宽高判断
    // 若是某一函数要调用该函数，则可以 setImagePreview($("#file")[0])
    function setImagePreview(obj) {
        
        //var filename = obj.value;// 如 C:\xxx.png
        
        if(obj.value == null || obj.value == '') {//也可以不写这个判断
            obj.outerHTML=obj.outerHTML;//清空
            return;
        }
  
        //验证文件扩展名是否符合要求  
        var res = validateExtends(obj);  
        if (res == false) {
            alert("文件不合法,暂只支持jpg、png、bmp格式!");
            obj.outerHTML=obj.outerHTML;//清空
            return;  
        }  
        //验证大小  
        res = validateSize(obj);  
        if (res == false) {  
            obj.outerHTML=obj.outerHTML;//清空
            return;  
        }  
  
        //还可以验证图片的  width 和 height  
        //注意，这里有个坑，清空文件操作，是在函数里执行的  
        //img.onload 是在  显示图片才执行的。  
        //具体原因请看函数内  
        widthAndHeight(obj);  
  
        //获得 路径，显示图片，如果调用  widthAndHeight 函数，下面两句代码要注释  
        //var objUrl = getObjectURL(f.files[0]);  
        //$("#preview").attr("src", objUrl);  
  
        //获得 图片 路径  
        function getObjectURL(obj) {
            debugger;
            var url = null;  
            if (window.createObjectURL != undefined) { // basic  
                url = window.createObjectURL(obj);//这个未触发过，不知道对不对，如果报错，参数改成 obj.files[0]
            } else if (window.URL != undefined) { // mozilla(firefox)  
                url = window.URL.createObjectURL(obj.files[0]);// google浏览器 走了这句代码
            } else if (window.webkitURL != undefined) { // webkit or chrome  
                url = window.webkitURL.createObjectURL(obj);//这个未触发过，不知道对不对，如果报错，参数改成 obj.files[0]
            }  
            return url;  
        }  
  
        //验证 文件后缀名是否符合要求  
        function validateExtends(obj) {
            var arr = [ "jpg", "png", "bmp" ];//文件后缀名
            var name = obj.value;//文件名   C:\xxx.png
            //获得文件后缀名  
            var index = name.lastIndexOf(".");  
            //截取字符串，并转换为小写
            var ext = name.substr(index + 1).toLowerCase();  
            //判断后缀名是否符合要求  
            for (var j = 0; j < arr.length; j++) {  
                if (ext == arr[j]) {  
                    return true;//符合  
                }  
            }  
            return false;//不符合  
        }  
  
        //验证上传文件大小  
        function validateSize(obj) {
            var name = obj.value;//文件名   xxx.png
            //判断文件大小是否超过5M  
            var size = obj.size / 1024;// 字节 / 1024 = KB  
            var max_size = 5 * 1024;//允许最大KB  
            if (size == 0) {
                alert(name + " 为空文件");
                return false;  
            } else if (size > max_size) {
                alert(name + " 大小超过5M");
                return false;
            }  
            return true;  
        }  
  
        //验证图片的width 和 height  
        function widthAndHeight(obj) {
            //创建虚拟的img图片，只是为了能获取上传图片的宽和高  
            var img = new Image();  
            img.src = getObjectURL(obj);  
            img.onload = function() {  
                var width = this.width;
                var height = this.height;

                //进行判断，是否符合像素要求
                if (width > 500 || height > 500) {
                    alert("图片宽不能大于500像素，图片高不能大于500像素");
                    obj.outerHTML=obj.outerHTML;//清空
                    return;
                }

                //获得路径，显示图片  
                var objUrl = getObjectURL(obj);
                $("#preview").attr("src", objUrl);  
                //问：为什么显示图片的代码放这里？  
                //答：因为如果放外面，会先显示图片，然后在执行这个  img.onload 函数  
                //    找了好久，都没找到解决函数，所以只能放  img.onload 函数里面  
                //      所以，如果要判断上传图片的宽高，这两句代码要写在这里面  
                //      外面的两句代码要注释掉  
            };//end onload  
        }  
  
    }// setImagePreview  
</script>


</head>  
<body>  
  
    <div>  
<span>缩略图：</span>   
<img id="preview" alt="" src="" style="width: 300; height: 300;">  
</div> 
<br />  

<input type="file" id="file" name="file" οnchange="setImagePreview(this)">  
  
</body>  
</html>