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

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

主题：

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

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

var iconElement = $("#photo");var image = newImage();
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) throwsIOException{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= newSimpleDateFormat(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();//ajaxreturn 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 = newArray();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;varid;varname;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一旦牵涉到兼容问题就头大，看来页面的编码还真是一般人干不了的啊...

让我们继续前行

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

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