zoukankan      html  css  js  c++  java
  • js判断上传图片文件大小,尺寸,格式

    /**
     * 文件宽高
     * @param eventId id
     * @param w 宽度
     * @param h 高度
     * @param callback 回调函数
    这里判断图片像素的方法是异步的,所以需要在回调函数中来进行上传的操作
    */ function testImgWidthHeight(eventId, w,h,callback){ var input = document.getElementById(eventId); if(input.files){ //读取图片数据 var f = input.files[0]; var reader = new FileReader(); reader.onload = function (e) { var data = e.target.result; //加载图片获取图片真实宽度和高度 var image = new Image(); image.onload=function(){ var width = image.width; var height = image.height; if (width != w || height != h) { //隐藏 input.value=""; callback && callback(false); } else { callback && callback(true); } }; image.src= data; }; reader.readAsDataURL(f); }else{ var image = new Image(); image.onload =function(){ var width = image.width; var height = image.height; var fileSize = image.fileSize; alert(width+'===2==='+height+"====="+fileSize); } image.src = input.value; } }
    /**
    *文件大小
    * @param fileData
    * @param Max_Size
    * @returns {boolean}
    */
    function testMaxSize(fileData,Max_Size){
    var isAllow=false;
    var size = fileData.size;
    isAllow = size <= Max_Size;
    if(!isAllow){
    vue.$message({
    message: '图片大小超过限制!',
    type: 'warning'
    });
    }
    return isAllow;
    }
    /**
    * 判断图片类型
    * @param eventId
    * @param gif|jpg|jpeg|png|GIF|JPG|PNG
    * @returns {boolean}
    */
    function testImgType(eventId) {
    var tmpFile = document.getElementById(eventId);
    if (!/.(jpg)$/.test(tmpFile.value)) {
    tmpFile.value= "";
    vue.$message({
    message: '图片格式不正确!',
    type: 'warning'
    });
    return false;
    }
    return true;
    }
     
            //上传图片
                   getFile(event) {
                       let eventId = event.target.id;
                       let type=  testImgType(eventId);
                       if(!type){
                           return;
                       }
                       let max = testMaxSize(event.target.files[0],1024*3*1024);
                       if(!max){
                           vue.$message({
                               message: '图片大小超过限制!',
                               type: 'warning'
                           });
                           return;
                       }
                       var _this =this;//回调函数this指向
                       let width = 1920;
                       let height = 1080;
                       if(eventId=="img5" || eventId=="img6" || eventId=="img7" || eventId=="img8" ){
                           width =1080;
                           height=1920;
                       }
                       let widthImg = testImgWidthHeight(eventId,width,height,function (res) {
                           if (!res) {
                               vue.$message({
                                   message: '图片尺寸不正确!',
                                   type: 'warning'
                               });
                           }else {
    //上传请求的逻辑,在回调函数中进行处理; let formData
    = new FormData(); formData.append('file', event.target.files[0]); let config = { headers: { 'Content-Type': 'multipart/form-data' } } _this.$http.post([[@{/common/uploadFile}]], formData, config).then(function (res) { if (res.data.code == '000') { if(eventId=='img1' || eventId=='img2' ){ _this.designUserList[0].cardImg=res.data.data; } } })
                      }
                      });

                        },
     
  • 相关阅读:
    100%解决XP系统asp http500内部错误[转自XX博客]
    .net使用DotNetCharting控件生成报表统计图总结 (转地址)
    关于request取中文字符串变?的解决办法
    Delete删除大批量数据无响应的解决办法
    点击GridView模版列里的按钮取GridView当前被操作行的数据(转载)
    繁體字顯示問題
    寫博客過程中遇到的問題
    box model相關的API
    Buddhism常用術語
    靡不有初鮮克有終
  • 原文地址:https://www.cnblogs.com/SimonHu1993/p/9253732.html
Copyright © 2011-2022 走看看