图片尺寸判断等-我们到底能走多远系列（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一旦牵涉到兼容问题就头大，看来页面的编码还真是一般人干不了的啊...

让我们继续前行

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

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