图片尺寸判断等-我们到底能走多远系列（21）

我们到底能走多远系列（21）

扯淡：又是一年过年，给各位拜个很早很早的年，实在点的祝福：祝各位明年工资全部翻一番啦！

 

主题：

1，判断上传图片尺寸功能

如下代码即可在页面上结果掉这个问题：

var iconElement = $("#photo");
var image = new Image();
image.src = iconElement.attr("src");
var realWidth = image.width;
var realHeight = image.height;

但是因为我后续代码中使用了截图的插件，导致插件无法正常使用。

 

被迫本人改变了流程：

点击file按钮-->选择图片-->onchange事件上传图片到后台-->后台判断图片尺寸-->返回结果

 

上传图片的js代码：根据msg的值来判断尺寸是否符合。

$.ajaxFileUpload({url:"uploadPreviewImage.html",
        secureuri:false,
        fileElementId:"advImage",
        dataType:"json",
        success:function (data , status) {

            if(data.msg=="1"){//后台检测尺寸不符合
                alert("图片大小小于480×520，无法进行裁剪");
                return;
            }
            
        },
        error:function (data, status, e) {
            //alert("图片上传失败,请重新选择图片");
        }
    });

后台判断代码：代码中的实现是先把文件保存下来，然后利用BufferedImage 来判断尺寸，不符合删除。

其实可以在没有生成文件的时候直接进行判断尺寸，不符合就不用产生文件了。我这个是比较差的实现：

    public ModelAndView uploadPreviewImage(HttpServletRequest request, HttpServletResponse response) throws IOException{
        User user = (User)request.getSession().getAttribute("user");
        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest)request;
        MultipartFile image = multipartRequest.getFile("advImage");
        
        response.setCharacterEncoding(BusinessConstants.ENCOD_UTF);
        response.setHeader("ContentType", "json");
        
        PrintWriter out = response.getWriter();
        
        // 组合零时图片名
        String imageName = image.getOriginalFilename();
        String file_ext = imageName.substring(imageName.lastIndexOf(BusinessConstants.DOT) + 1);
        SimpleDateFormat df = new SimpleDateFormat(BusinessConstants.DATE_FORMAT);
        String tempImageName = user.getId() +BusinessConstants.UNDERLINE + df.format(new Date()) + BusinessConstants.DOT + file_ext;        
        
        // 存放浏览图片的零时文件路径
        File file = new File(request.getSession().getServletContext().getRealPath(BusinessConstants.TEMP_PICTURE_PATH + 
                tempImageName));
        
        byte[] advImageBytes = null;
        InputStream advImageStream = null;
        String msg = "0";
        try {
            file.createNewFile();
            advImageStream = image.getInputStream();
            advImageBytes = FileCopyUtils.copyToByteArray(advImageStream);
            FileCopyUtils.copy(advImageBytes, file);
            advImageStream.close();
            BufferedImage buff = ImageIO.read(file); 
            // 判断图片大小
            if(buff.getWidth() < 480 || buff.getHeight() < 520){
                msg="1";
                file.delete();
            }
        } catch (IOException e) {

            e.printStackTrace();
        }
        
        String tempPath =  BusinessConstants.TEMP_RELATIVE_PICTURE_PATH + 
         tempImageName;
        
        // 传给页面相对路径
        out.print("{");  
        out.print("tempPath:'"+tempPath+"',"); 
        out.print("msg:'"+msg+"'"); 
        out.print("}");
        out.flush();
        out.close(); 
        // ajax
        return null;
    }
    

上传利用的是ajaxupload插件，那么网上的朋友也有一些遇到过这种问题：就是文件上传后，file内的value就清空了，没有保留。

 

事实上，ajaxFileUpload没有使用ajax来实现文件上传，它只是利用iframe，局部刷新的方式来模拟ajax的效果，这样就可以理解路径内容没有保留了。

那么是不是我们在上传完后，把路径内容重新赋值给这file呢？理论上是可行的，但这个可能牵涉到浏览器的安全机制，个人觉得这样去做有点死胡同的感觉。

那么问题就是：onchange上传完文件 file标签是空的，体验上下降不少。结合上面的分析，比较好的做法就是在完成上传返回后，把file隐藏，显示上传成功。这样的方式很简单，也不用一直想着怎么把路径表现出来了。

至于页面上的file标签怎么隐藏，提示怎么显示：

可以利用jquery来操作：

        $('#shopNameId').show();
        $('#batchshopNameId').hide();

效果这样：

上传前：

上传后：

点击重新上传后：

2，关于页面checkbox 多选的后操作的问题：

场景是：选中多个checkbox后，进行后台交互，比如删除这些几条数据什么的。

如何取得选中的checkbox的id数组呢？

一下是利用jquery完成的，但是牵涉到浏览器问题，所以看到这里的你，能否提供避开浏览器兼容问题的代码出来呢，谢谢啦。

   var isIE=!!window.ActiveXObject;
   var isIE6=isIE&&!window.XMLHttpRequest;
   var list = new Array();
   if(isIE6){
   $("input[type=checkbox][name='chk_id'][checked]" ).each(function(i){
        list.push(this.id);
    })
   }else{
    $("input[type=checkbox][name='chk_id']").each(function(){
    if($(this).attr("checked") == true){
            list.push(this.id);
        }
   })
   }
   if(list.length<1){
    alert("请先选择批量修改的数据");
      return;
   }

 

3，下拉框联动问题：

页面上连个下拉框有联系，比如省市关系，行业大类小类

选择大类后小类的下拉框就内容就改变。

下拉框的代码：开始的时候大类给内容可选择，选择后出发js事件，用ajax去后台把对应的小类数据取出显示：

<select id="parentSelect" name="parentSelect" style="margin:0px 5px; height:20px; line-height:20px;">
    <c:forEach items="${industryList}" var="item" varStatus="status">
    <option id="${item.id }" value="${item.id }">${item.name }</option>
    </c:forEach>
    </select>
    小类<select id="childSelect" disabled="disabled" name="childSelect" style="margin:0px 5px;height:20px;line-height:20px;">
    </select>

 

出发事件的js：

$(document).ready(function(){
        $("#parentSelect").change(function(){
        var parentId = $(this).find("option:selected").attr("id");
        $.post("getChildIndustry.html",{parentId:$(this).find("option:selected").attr("id")},
        function(date)
        {
          $("#childSelect").html('');
          $("#industry").html("");//这个其实是一个隐藏的div <div id="industry" style="display: none;"></div>
          $(date).appendTo('#industry');
          var childList = $("child");
     
          $.each(childList,function(key,val){
          var value = document.getElementById(val.id);
          var isChrome = window.navigator.userAgent.indexOf("Chrome") !== -1;
          var id;
          var name;
          if(isChrome){
          name = value.innerHTML;
          }else{
            name = value.str;
          }
          id = val.id;
          $('<option value=' + id + '>'+ name + '</option>')
          .appendTo('#childSelect'); //添加下拉框
          $("#childSelect").attr('disabled', '') //2号下拉框可用
         });
     });
   });
  

至于像页面上默认选中也是比较方便的。

 

总结：

1,有时候，代码打的快还不如方案选选得好。

2,js一旦牵涉到兼容问题就头大，看来页面的编码还真是一般人干不了的啊...

 

 

 

 

让我们继续前行

----------------------------------------------------------------------

努力不一定成功，但不努力肯定不会成功。
共勉。