JS implementation of the picture preview plug-in and usage example "do not upload pictures" _javascript tips

This article describes the JS implementation does not need to upload a picture preview plug-in and usage. Share to everyone for your reference, specific as follows:

Small dozens of lines of code, very good, very practical.

Supports multiple picture previews, as long as new multiple objects are on the line.

HTML is as follows

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en"
"http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd ">
 
 

The plugin Uploadpreview.js code is as follows

* * Release time: December 12, 2014 * Plugin introduction: Picture upload local Preview plugin compatible browser (IE Google Firefox) does not support safari of course, if the browser using these kernels are basically compatible with * use: * Interface Construction (img tag must have div and must give di V control ID) * <div id= "imgdiv" ></div> * <input type= "file" I
d= "Up_img"/> * Calling code: * New Uploadpreview ({upbtn: "up_img", Divshow: "Imgdiv", Imgshow: "Imgshow"});
* Parameter Description: *upbtn: Select File control ID;
*divshow:div control ID;
*imgshow: Picture control ID;
*width: Preview width;
*height: Preview height;
*imgtype: Support file type format: ["JPG", "PNG"];
*callback: Callback method after file selection;
* Version: v1.4 update content as follows: 1. Fix callback.
* Version: v1.3 update is as follows: 1. To fix a multi-level framework to get a path bug.
2. Remove dependencies on the jquery plugin.
  */* *work: Picture Preview Plugin * * * var uploadpreview = function (setting) {/* *work:this (Current object) * * var _self = this; /* *work: null or null value/_self.
    IsNull = function (value) {if (typeof (value) = = "function") {return false;} if (value = = Undefined | | | value = NULL | | value = = "" | |
    Value.length = = 0) {return true;
  return false; }/* *work: Default configuration */_self. defautlsetting = {upbtn: "", DivShow: "", Imgshow: "", width:100, height:100, Imgtype: ["gif", "JPEG", "JPG", "BMP", "PNG"], ErrMsg:
  "Select File error, the picture type must be one of (Gif,jpeg,jpg,bmp,png), Callback:function () {}};" /* *work: Read configuration * * _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: Get text Control 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: Binding Event/_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: Execute binding Event/_self.
Bind ();

 }

For more information on JavaScript-related content readers can view the site topics: "JavaScript files and directory operation tips Summary", "JavaScript switching effects and techniques summary", "JavaScript Search Algorithm Skills summary", " JavaScript animation effects and tips Summary, "JavaScript Error and debugging skills Summary", "JavaScript data structure and algorithm skills summary", "JavaScript traversal algorithm and Skills summary" and "JavaScript Mathematical operation Usage Summary"

I hope this article will help you with JavaScript programming.