圖片選擇預覽 方法

 

 <div class="form-group ">
                                        <fieldset>
                                            <div class="form-group ">
                                                <div class="form-group ">
                                                    <label for="iconValue">海報圖片</label>
                                                    <input type="file" id="imageFile" name="imageFile" class="form-control hidden" accept="image/*" autocomplete="off">
                                                </div>
                                                <div>
                                                    <a href='javascript:$("#imageFile").click();' id="preview">
                                                        <img src="/assets/images/nophoto.png" alt="" class="thumbnail" style="width: 80px;">
                                                    </a>
                                                </div>
                                                <p class="help-inline text-info">點擊圖片可更換圖標</p>
                                            </div>
                                        </fieldset>
                                    </div>

 

 

// 上傳圖片控件的點擊事件
    _reg_files_event : function() {
        bindFileChange("imageFile");
        /** 綁定文件選擇後的事件處理 */
        function bindFileChange(fileId) {
            $("#" + fileId).bind(
                    "change",
                    function() {
                        var fileName = $(this).val();
                        if (fileName == "") {
                            showPopup("請選擇圖片");
                            return;
                        } else if (fileName.indexOf(".jpg") > 0 || fileName.indexOf(".jpeg") > 0 || fileName.indexOf(".png") > 0 || fileName.indexOf(".gif") > 0
                                || fileName.indexOf(".JPG") > 0 || fileName.indexOf(".JPEG") > 0 || fileName.indexOf(".PNG") > 0 || fileName.indexOf(".GIF") > 0
                                || fileName.indexOf(".bmp") > 0) {
                            if (!checkImgSize(fileId, 0.5)) {
                                $(this).val("");
                                return;
                            }
                            $("#" + fileId).parent().next().html('');
                            if (window.FileReader) {
                                var fr = new FileReader();
                                fr.onloadend = function(e) {
                                    $("#" + fileId).parent().next().append('<img src="' + e.target.result + '"  alt="" class="thumbnail" style="height: 100px;">');
                                };
                                fr.readAsDataURL(this.files[0]);
                            }
                        } else {
                            $(this).val("");
                            showPopup("圖片格式不正確！");
                            return;
                        }
                    });
        }
        
        /** 校驗圖片大小 */
        function checkImgSize(fileId, imgSize) {
            if (!imgSize) {
                imgSize = 1;
            }
            var file = document.getElementById(fileId);
            var totalSize = 0;
            for (var i = 0; i < file.files.length; i++) {
                if (file.files[i].size >= 1024 * 1024 * imgSize) {
                    showPopup("圖片[" + file.files[i].name + "]不能超過" + imgSize + "M");
                    return false;
                }
                totalSize += file.files[i].size;
                
            }
            if (totalSize >= 1024 * 1024 * 5) {
                showPopup("圖片上傳，不能超過5M");
                return false;
            }
            return true;
        }
        
    },