js实现上传图片本地预览功能

标签：

js:

/**
     * 上传图片本地预览方法
     * @param {Object} fileObj 上传文件file的id元素  fresh-fileToUpload
     * @param {Object} previewObj 上传图片的预览id元素  fresh-send-preview-img
     * @param {Object} localImg 预览图片的父层id元素  fresh-send-preview-imgvideo
     */
    fs.setImagePreview =function(fileObj, previewObj, localImg) {
          var docObj = document.getElementById(fileObj);
          var imgObjPreview = document.getElementById(previewObj);

          if (docObj.files && docObj.files[0]) {
              //火狐下，直接设img属性
              //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式  
              imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
          } else {
              //IE下，使用滤镜
              docObj.select();
              var imgSrc = document.selection.createRange().text;
              var localImagId = document.getElementById(localImg);
              //必须设置初始大小
              // localImagId.style.width = "120px";
              // localImagId.style.height = "80px";
              //图片异常的捕捉，防止用户修改后缀来伪造图片
              try {
                  localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                  localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
              } catch (e) {
                  alert("您上传的图片格式不正确，请重新选择!");
                  return false;
              }
              imgObjPreview.style.display = ‘none‘;
              document.selection.empty();
          }

          return true;
    }

使用方法：

fs.fileupload = function(dom) {
        var that =$(dom);
        if( that.length == 0 ){
          return false;
        }
        if (!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(dom.value)) {
            alert(‘图片格式无效！‘);
            return false;
        }
        //显示图片预览区域
        $(‘#fresh-send-preview‘).removeClass(‘hide‘);
        $(‘.fresh-send-preview-imgvideo‘).find(‘img‘).attr(‘src‘, ‘http://img04.xesimg.com/loading.gif‘);
        this.setImagePreview(‘fresh-fileToUpload‘, ‘fresh-send-preview-img‘, ‘fresh-send-preview-imgvideo‘);
    };

html:

<div class="fresh-send-preview hide" id="fresh-send-preview">
             <div class="fresh-send-preview-imgvideo" id="fresh-send-preview-imgvideo">
                 <img id="fresh-send-preview-img" src="img/fresh-send-img.png">
                 <i class="fresh-preview-close"></i>
             </div>
</div>

 <div class="fresh-send-upload">
   <input class="fresh-fileToUpload" id="fresh-fileToUpload" type="file" size="45"  name="dynImg" accept="image/*" />
 </div>

js实现上传图片本地预览功能

标签：

原文地址：http://www.cnblogs.com/dearxinli/p/4914453.html