图片选择预览方法

<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;
       }

   },

图片选择预览 方法

猜你喜欢

图片选择预览方法