js上传图片进行预览、验证格式及尺寸

末蓝、 2022-08-22 03:52 254阅读 0赞

<script type="text/javascript">
    var flag = 0;
    /**
     * 校验表单
     */
    function checkForm(){
    	var idcard =document.getElementById("servertypename").value;
    	var fileName = $('#uploadPath').val();
    	var check_flag = false;
    	if(idcard==""){
    		alert("类型名称不能为空！");
    	}else if(fileName==""){
    		alert("请上传图标！");
    	}else {
    		if(flag==1)
    			alert("您只能输入GIF,BMP,PNG,JPG,JPEG格式的文件");
    		else if(flag==2)
    			alert("请上传尺寸为120*120的图片！");
    		else
    			check_flag = true;
    	}
    	return check_flag;
    };
    /**
     * 预览图片
     */
    function previewImage(file, url) {
    	var MAXWIDTH = 120;
        var MAXHEIGHT = 120;
        if (file.files && file.files[0]) {
            var img = document.getElementById(url);
            img.onload = function() {
                var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                img.width = rect.width;
                img.height = rect.height;
                img.style.marginTop = rect.top + 'px';
            };
            var reader = new FileReader();
            reader.onload = function(evt) {
                img.src = evt.target.result;
            };
            reader.readAsDataURL(file.files[0]);
        } else {
            file.select();
        }
        getImageSize(document.getElementById("uploadPath"));
    };
    /**
     * 压缩图片
     */
    function clacImgZoomParam(maxWidth, maxHeight, width, height) {
        var param = {
            width: width,
            height: height
        };
        if (width > maxWidth || height > maxHeight) {
            rateWidth = width / maxWidth;
            rateHeight = height / maxHeight;
            if (rateWidth > rateHeight) {
                param.width = maxWidth;
                param.height = Math.round(height / rateWidth);
            } else {
                param.width = Math.round(width / rateHeight);
                param.height = maxHeight;
            }
        }
        return param;
    };
    /**
     * 校验图片尺寸
     */
    function getImageSize(obj) {
        var _file = document.getElementById("uploadPath");
        var i = _file.value.lastIndexOf('.');
        var len = _file.value.length;
        var extEndName = _file.value.substring(i + 1, len);
        var extName = "GIF,BMP,PNG,JPG,JPEG";
        if (extName.indexOf(extEndName.toUpperCase()) == -1) {
            alert("您只能输入" + extName + "格式的文件");
            flag = 1;
        } else {
            var url, image;
            if (obj.files) {
                if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
                    obj.select();
                    url = document.selection.createRange().text;
                }
                url = window.URL.createObjectURL(obj.files[0]);
            } else {
                url = obj.value;
                url = "file:///" + url;
            }
            image = new Image();
            image.src = url;
            image.onload = function() {
                if (image.width != 120 || image.height != 120) {
                    alert("请上传尺寸为120*120的图片！");
                    flag = 2;
                }else{
                	flag = 0;
                }
            };
        }
    };
    </script>

预览图片及上传按钮：

<img src="<%=path%>/images/alum_def_img.jpg" name="img" id="img" width="60px;" height="60px;" align="center" style="margin-top: 5px; margin-bottom: 5px;"/>
    <input type="file" class="file" id="uploadPath" name="uploadPath" accept="image/gif,image/png,image/bmp,image/jpeg" οnchange="previewImage(this,'img')" />

提交表单：

<input type="submit" name="submit" οnclick="javascript:return checkForm();" value="提交" style="font-size:16px;width:45px;height:28px;background:#aae3fc;" />

发表评论取消回复

表情：

评论列表（有 0 条评论，254人围观）

还没有评论，来说两句吧...

相关阅读

相关上传图片实现预览

![Image 1][]浏览器必须支持FileReader,先判断是否支持。监听type属性等于file的input的change（值改变）事件。使用F

Bertha 。/ 2023年10月16日 22:41/ 0 赞/ 47 阅读

相关 jquery实现上传图片及图片大小验证、图片预览效果代码

[jquery实现上传图片及图片大小验证、图片预览效果代码][jquery] jquery实现上传图片及图片大小验证、图片预览效果代码上传图片验证 \/

冷不防/ 2023年06月12日 08:39/ 0 赞/ 18 阅读

相关 js上传图片进行预览、验证格式及尺寸

<script type="text/javascript"> var flag = 0; / 校验表单 / functi

末蓝、/ 2022年08月22日 03:52/ 0 赞/ 255 阅读

相关 js实现上传图片事实预览

html部分 <img alt="" id="img" > <input type="file" onchange='PreviewImage(this

分手后的思念是犯贱/ 2022年07月12日 23:08/ 0 赞/ 417 阅读

相关 js实现对上传图片进行压缩并且预览

js实现对上传图片的路径转成base64编码，并且对图片进行压缩，实现预览功能需要先引入jquery: <script src="http://i.gtimg.cn/qzo

我就是我/ 2022年06月04日 08:35/ 0 赞/ 324 阅读

相关 js上传图片预览

function imgFile(file){ file.change(function(){ var current_img=this.file

本是古典何须时尚/ 2022年05月22日 03:34/ 0 赞/ 495 阅读

相关 js 实现异步上传图片+预览

两种js实现方式，一种用原生的ajax；另一种用JQuery，例子比较简单，直接上代码。 ![复制代码][copycode.gif] <!DOCTYPE html>

我不是女神ヾ/ 2022年05月06日 20:28/ 0 赞/ 463 阅读

相关图片预览与上传

> 小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大

小鱼儿/ 2022年04月24日 10:50/ 0 赞/ 625 阅读

相关 js实现图片上传预览及进度条

实现的功能如下： 1：去除浏览器<input type="file">默认的样式； 2：图片从本地选择后，立即预览图片； 3：使用上传可以查

- 日理万妓/ 2022年04月16日 03:37/ 0 赞/ 514 阅读

相关上传图片并预览

HTML： <input accept="image/" name=" fileImage" type="file" onchange="upload"> <

Myth丶恋晨/ 2021年11月23日 10:16/ 0 赞/ 807 阅读