圖片尺寸判斷等-我們到底能走多遠系列（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一旦牽涉到相容問題就頭大，看來頁面的編碼還真是一般人幹不了的啊...

 

 

 

 

讓我們繼續前行

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

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