专家坐堂-js增加判断照片宽度Foxtable(狐表) - 新一代数据库软件，完美融合Access、Foxpro、Excel、vb.net之优势，人人都能掌握的快速软件开发工具!

以文本方式查看主题

-  Foxtable(狐表)  (http://foxtable.net/bbs/index.asp)
--  专家坐堂  (http://foxtable.net/bbs/list.asp?boardid=2)
----  js增加判断照片宽度  (http://foxtable.net/bbs/dispbbs.asp?boardid=2&id=112908)

--  作者：zhangjian222200
--  发布时间：2018/1/5 8:53:00
--  js增加判断照片宽度

’这是上传照片页面
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编辑过]

--  作者：有点甜
--  发布时间：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
--  发布时间：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编辑过]

--  作者：有点甜
--  发布时间：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
--  发布时间：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传来的？

--  作者：有点甜
--  发布时间：2018/11/25 17:47:00
--

比如

alert(glr.id)

alert(upd.id)