Foxtable(狐表) → 用户栏目 → 专家坐堂 → js增加判断照片宽度


  共有1970人关注过本帖树形打印复制链接

主题：js增加判断照片宽度
帅哥哟，离线，有人找我吗？
zhangjian222200
 小大  1楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级：七尾狐 帖子：1553 积分：11003 威望：0 精华：0 注册：2016/9/12 11:18:00 		js增加判断照片宽度  发帖心情 Post By：2018/1/5 8:53:00 [只看该作者]

’这是上传照片页面
Dim e As RequestEventArgs = args(0)                            '上传照片
Dim wb As New weui
wb.Title = "123456"
If e.PostValues.Count = 0 Then
    wb.AddTopTips("","toptip1","") '用于显示动态错误提示
    
    wb.AddPageTitle("","pageheader","123456","")
    wb.AddForm("","form1","valid_images.htm")
    With wb.AddInputGroup("form1","ipg1","展示照(请选择清晰靓照,1张即可)") '文件上传(1个)
        With.AddUploader("up1","",False)
            .AllowDelete = True '允许用户删除图片
            .ScaleWidth = 400 '自动压缩图片宽度为400个像素,高度等比例压缩
        End With
    End With
    With wb.AddInputGroup("form1","ipg22","生活照(非必须上传)") '带图片浏览的文件上传(最少4个) 选择3张以上靓照
        With.AddUploader("up4","",True) 'True表示允许一次上传多个文件
            .AllowDelete = True '允许删除
            .Incremental = True '允许 重复选择文件或连续拍照
            .ScaleWidth = 400 '自动压缩图片宽度为400个像素,高度等比例压缩
        End With
    End With
    With wb.AddButtonGroup("form1","btg1",True)
        .Add("btn1", "提交", "button").Attribute= "onclick='validit_images()'" '调用js函数上传
    End With
    wb.AddToast("","tst1", "正在上传",1)
    wb.AddToast("","tst2", "上传成功",0)
    wb.AddToast("","tst3", "上传失败",0).Icon= "warn"

    wb.AppendHTML("<script src='./lib/ajaxform_images.js'></script>") '引入脚本文件
    e.WriteString(wb.Build) '生成网页
End If

’这是处理照片的js，已经能够实现判断照片格式和照片数量，可否在下面的js代码中
’希望js增加功能：1.判断照片的宽度小于400，提示照片分辨率太小；2.照片宽度<高度，提示请上传竖着拍的照片。
function validit_images(){
  var v1 = document.getElementById("up1_thumbnails").getElementsByTagName("li").length;
  var v2 = document.getElementById("up4_thumbnails").getElementsByTagName("li").length;
  //alert(v1 + " " + v2);

var frm = document.getElementById("form1");
var frmdata = new FormData(frm);
if (frm.incremental) {
    var fluds = frm.getElementsByClassName("weui_uploader_input");
    for (var idx = 0; idx < fluds.length; idx++) {
        var files = fluds[idx].Files;
        if (files) {
            for (var i = 0; i < files.length; i++) {
                //alert(files[i].blobFile);
                var fln = files[i].blobFile
                if (typeof(fln) == "undefined") {
                    //alert("照片格式不正确");
                    showTopTips("toptip1","照片格式不正确！",2000);
                    return false;
                }
                fln = fln.substring(fln.lastIndexOf(".") + 1).toLowerCase();
                switch (fln) {
                case "jpg":
                case "jpeg":
                //case "png":
                //case "gif":
                case "bmp":
                    break;
                default:
                    //alert("照片格式不正确");
                    showTopTips("toptip1","照片格式不正确！",2000);
                    return false;
                }
            }
        }
    }
}

 if(v1 < 1){
  showTopTips("toptip1","请选择1张展示照上传！",2000);
  return false;
  }
 if(v1 > 1){
  showTopTips("toptip1","展示照只可以上传1张！",2000);
  return false;
  }
 if(v2 > 0){
   if(v2 < 3){
    showTopTips("toptip1","请选择3张以上生活照上传！",2000);
    return false;
    }
  }
 if(v2 > 6){
  showTopTips("toptip1","生活照最多可以上传6张！",2000);
  return false;
  }
  show("tst1",2000);
  var result = submitAjaxForm('form1','afterSubmit');
}
function afterSubmit(result){
  hide("tst1");
 if (result=='OK') {
  show("tst2");
  location="success.htm";
  }
 else{
    show("tst3",2000);
  }
}
[此贴子已经被作者于2018/1/5 8:56:11编辑过]
 回到顶部
帅哥哟，离线，有人找我吗？
有点甜
 小大  2楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级：版主 帖子：85326 积分：427815 威望：0 精华：5 注册：2012/10/18 22:13:00 		  发帖心情 Post By：2018/1/5 10:34:00 [只看该作者]

测试了一下，无法在选择文件结束以后读取文件信息的，只能在选择文件的时候读取。

 

所以无法在最后提交的时候读取图片宽高，必须在选择文件的时候，就处理，或者保存宽高信息。

 

修改weui.me.js 的 previewFile3 函数

 

function previewFile3(){
 var images=[];
 var glr=document.getElementById(this.id+'_gallery');
 var thumbs = document.getElementById(this.id +"_thumbnails");
 if (glr.attributes["data-images"].value){
  images=glr.attributes["data-images"].value.split("|");
 }
 if (!this.nextindex){this.nextindex=0;}
 var upd = this;
 for(var i=0;i<this.files.length;i++){
  var Files = this.Files;
  var reader = new FileReader();
  var ext = this.files[i].name;
  ext = ext.substring(ext.lastIndexOf(".")+1).toLowerCase();
  reader.Extension = ext;
  reader.FileName = this.files[i].name;
  switch(ext){
   case "jpg": case "jpeg":case "png":case "gif":case "bmp":case "wmf":
    reader.onload=function(e){
     var img= new Image();
     var red = e.target;
     img.onload= function(g){
alert(img.width)
alert(img.height)
      var w=-1, h=-1;
      if (upd.hasAttribute("data-scalewidth")){w = upd.attributes["data-scalewidth"].value;}
      if (upd.hasAttribute("data-scaleheight")){h = upd.attributes["data-scaleheight"].value;}
      if(w>0 && h<=0){h=w/img.width * img.height;}
      else if(w<=0 && h >0){w=h/img.height * img.width;}
      var canvas = document.createElement('canvas');
      var ctx = canvas.getContext('2d');
                  canvas.width = w;
      canvas.height = h;
      ctx.drawImage(img, 0, 0, w, h);
      if(red.Extension == 'jpg' || red.Extension == 'jpeg'){var base64Data = canvas.toDataURL('image/jpeg');}
      else{var base64Data = canvas.toDataURL('image/png');}
      var nid =upd.id + "_thumb_" + upd.nextindex.toString()
      thumbs.insertAdjacentHTML("beforeEnd","<li data-gid='"+ upd.id + "_gallery'" +
      " data-image='" + nid + "'" + " id='" + nid + "'" +
      " class='weui_uploader_file' temp style='background-image:url(" + base64Data + ")'></li>"); 
      images[images.length]="'"+ nid +"'";
      glr.attributes["data-images"].value=images.join('|');
      upd.nextindex = upd.nextindex +1;
      Files[Files.length] = {blobFile:red.FileName,data:base64toBlob(base64Data)};
     }
     img.src = e.target.result; 
    }
    reader.readAsDataURL(this.files[i]);
    break;
   default:
    this.Files[this.Files.length]=this.files[i]; 
  }
 }
 this.value=""
}
 回到顶部
帅哥哟，离线，有人找我吗？
zhangjian222200
 小大  3楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级：七尾狐 帖子：1553 积分：11003 威望：0 精华：0 注册：2016/9/12 11:18:00 		  发帖心情 Post By：2018/1/5 11:03:00 [只看该作者]

weui.me.js previewFile3 函数楼上位置，只增加了楼上红色代码:确实提示了照片的宽高
alert(img.width)
alert(img.height)

问题：
1.判断照片的宽度小于400，如何终止选择？然后提示照片分辨率太小；
2.照片宽度<高度或高度大于2.5倍宽度，如何终止选择？然后提示请上传竖着拍的照片。
[此贴子已经被作者于2018/1/5 11:04:33编辑过]
 回到顶部
帅哥哟，离线，有人找我吗？
有点甜
 小大  4楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级：版主 帖子：85326 积分：427815 威望：0 精华：5 注册：2012/10/18 22:13:00 		  发帖心情 Post By：2018/1/5 11:35:00 [只看该作者]

参考代码

 

alert(img.width)
alert(img.height)
if(img.width < 400) {
    alert("分辨率太小");
    return;
}
if(img.width<img.height || img.height>2.5*img.width) {
    alert("有错误");
    return;
}
 回到顶部
帅哥哟，离线，有人找我吗？
zhangjian222200
 小大  5楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级：七尾狐 帖子：1553 积分：11003 威望：0 精华：0 注册：2016/9/12 11:18:00 		  发帖心情 Post By：2018/11/24 20:41:00 [只看该作者]

1楼部分代码：
    With wb.AddInputGroup("form1","ipg22","生活照(非必须上传)") '带图片浏览的文件上传(最少4个) 选择3张以上靓照
        With.AddUploader("up4","",True) 'True表示允许一次上传多个文件
            .AllowDelete = True '允许删除
            .Incremental = True '允许 重复选择文件或连续拍照
            .ScaleWidth = 400 '自动压缩图片宽度为400个像素,高度等比例压缩
        End With
    End With

问题：2楼的红色alert处，能否判断上传的照片，是不是从上面红字up4传来的？
 回到顶部
帅哥哟，离线，有人找我吗？
有点甜
 小大  6楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级：版主 帖子：85326 积分：427815 威望：0 精华：5 注册：2012/10/18 22:13:00 		  发帖心情 Post By：2018/11/25 17:47:00 [只看该作者]

比如

 

alert(glr.id)

alert(upd.id)
 回到顶部
RSS2.0 | Xhtml无图版 | Xslt无图版 Copyright © 2000 - 2018 foxtable.com Tel: 4000-810-820 粤ICP备11091905号
   Powered By Dvbbs Version 8.3.0
页面执行时间 0.04688 秒, 4 次数据查询