Heim >Web-Frontend >js-Tutorial >JS hat ein Bildvorschau-Plug-in und Anwendungsbeispiele implementiert [kein Hochladen von Bildern]

JS hat ein Bildvorschau-Plug-in und Anwendungsbeispiele implementiert [kein Hochladen von Bildern]

高洛峰Original: 2016-12-05 11:30:06967Durchsuche

Das Beispiel in diesem Artikel beschreibt die JS-Implementierung und Verwendung des Bildvorschau-Plug-Ins, das nicht hochgeladen werden muss. Ich teile es Ihnen als Referenz mit. Die Details sind wie folgt:

Ein paar Dutzend Codezeilen sind sehr leistungsstark und praktisch.

Unterstützt die Vorschau mehrerer Bilder, nur neuer mehrerer Objekte.

Der HTML-Code lautet wie folgt

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>uploadPreview演示</title>
  <script src="uploadPreview.js" type="text/javascript"></script>
  <script>
    window.onload = function () { 
      new uploadPreview({ UpBtn: "up_img", DivShow: "imgdiv", ImgShow: "imgShow" });
      new uploadPreview({ UpBtn: "up_img2", DivShow: "imgdiv2", ImgShow: "imgShow2" });
    }
  </script>
</head>
<body>
  <div id="imgdiv"><img  id="imgShow"    style="max-width:90%"/ alt="JS hat ein Bildvorschau-Plug-in und Anwendungsbeispiele implementiert [kein Hochladen von Bildern]" ></div>
  <input type="file" id="up_img" />
  <div id="imgdiv"><img  id="imgShow2"    style="max-width:90%" / alt="JS hat ein Bildvorschau-Plug-in und Anwendungsbeispiele implementiert [kein Hochladen von Bildern]" ></div>
  <input type="file" id="up_img2" />
</body>
</html>

Der Plugin-Code uploadPreview.js lautet wie folgt

/*
*发布时间:2014年12月12日
*插件介绍:图片上传本地预览插件 兼容浏览器(IE 谷歌 火狐) 不支持safari 当然如果是使用这些内核的浏览器基本都兼容
*使用方法:
*界面构造(IMG标签外必须拥有DIV 而且必须给予DIV控件ID)
* <div id="imgdiv"><img  id="imgShow"    style="max-width:90%"  style="max-width:90%" / alt="JS hat ein Bildvorschau-Plug-in und Anwendungsbeispiele implementiert [kein Hochladen von Bildern]" ></div>
* <input type="file" id="up_img" />
*调用代码:
* new uploadPreview({ UpBtn: "up_img", DivShow: "imgdiv", ImgShow: "imgShow" });
*参数说明:
*UpBtn:选择文件控件ID;
*DivShow:DIV控件ID;
*ImgShow:图片控件ID;
*Width:预览宽度;
*Height:预览高度;
*ImgType:支持文件类型 格式:["jpg","png"];
*callback:选择文件后回调方法;
*版本:v1.4
更新内容如下:
1.修复回调.
*版本:v1.3
更新内容如下:
1.修复多层级框架获取路径BUG.
2.去除对jquery插件的依赖.
*/
/*
*work:图片预览插件
*/
var uploadPreview = function(setting) {
  /*
  *work:this(当前对象)
  */
  var _self = this;
  /*
  *work:判断为null或者空值
  */
  _self.IsNull = function(value) {
    if (typeof (value) == "function") { return false; }
    if (value == undefined || value == null || value == "" || value.length == 0) {
      return true;
    }
    return false;
  }
  /*
  *work:默认配置
  */
  _self.DefautlSetting = {
    UpBtn: "",
    DivShow: "",
    ImgShow: "",
    Width: 100,
    Height: 100,
    ImgType: ["gif", "jpeg", "jpg", "bmp", "png"],
    ErrMsg: "选择文件错误,图片类型必须是(gif,jpeg,jpg,bmp,png)中的一种",
    callback: function() { }
  };
  /*
  *work:读取配置
  */
  _self.Setting = {
    UpBtn: _self.IsNull(setting.UpBtn) ? _self.DefautlSetting.UpBtn : setting.UpBtn,
    DivShow: _self.IsNull(setting.DivShow) ? _self.DefautlSetting.DivShow : setting.DivShow,
    ImgShow: _self.IsNull(setting.ImgShow) ? _self.DefautlSetting.ImgShow : setting.ImgShow,
    Width: _self.IsNull(setting.Width) ? _self.DefautlSetting.Width : setting.Width,
    Height: _self.IsNull(setting.Height) ? _self.DefautlSetting.Height : setting.Height,
    ImgType: _self.IsNull(setting.ImgType) ? _self.DefautlSetting.ImgType : setting.ImgType,
    ErrMsg: _self.IsNull(setting.ErrMsg) ? _self.DefautlSetting.ErrMsg : setting.ErrMsg,
    callback: _self.IsNull(setting.callback) ? _self.DefautlSetting.callback : setting.callback
  };
  /*
  *work:获取文本控件URL
  */
  _self.getObjectURL = function(file) {
    var url = null;
    if (window.createObjectURL != undefined) {
      url = window.createObjectURL(file);
    } else if (window.URL != undefined) {
      url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) {
      url = window.webkitURL.createObjectURL(file);
    }
    return url;
  }
  /*
  *work:绑定事件
  */
  _self.Bind = function() {
    document.getElementById(_self.Setting.UpBtn).onchange = function() {
      if (this.value) {
        if (!RegExp("\.(" + _self.Setting.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
          alert(_self.Setting.ErrMsg);
          this.value = "";
          return false;
        }
        if (navigator.userAgent.indexOf("MSIE") > -1) {
          try {
            document.getElementById(_self.Setting.ImgShow).src = _self.getObjectURL(this.files[0]);
          } catch (e) {
            var div = document.getElementById(_self.Setting.DivShow);
            this.select();
            top.parent.document.body.focus();
            var src = document.selection.createRange().text;
            document.selection.empty();
            document.getElementById(_self.Setting.ImgShow).style.display = "none";
            div.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
            div.style.width = _self.Setting.Width + "px";
            div.style.height = _self.Setting.Height + "px";
            div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src;
          }
        } else {
          document.getElementById(_self.Setting.ImgShow).src = _self.getObjectURL(this.files[0]);
        }
        _self.Setting.callback();
      }
    }
  }
  /*
  *work:执行绑定事件
  */
  _self.Bind();
}

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Ausführliche Erläuterung der Beispiele für benutzerdefinierte Freigabefunktionen des WeChat JS-SDK [Mit Freunden teilen/Mit Momenten teilen]Nächster Artikel：Ausführliche Erläuterung der Beispiele für benutzerdefinierte Freigabefunktionen des WeChat JS-SDK [Mit Freunden teilen/Mit Momenten teilen]

In Verbindung stehende Artikel

Mehr sehen