Home > Developer > Web Develop

Preview Plugin when uploading images

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

HTML code:

<!DOCTYPE HTML><HTML><Head><MetaCharSet= "UTF-8"><title>Insert Title here</title>  <Scriptsrc= "Uploadview.js"type= "Text/javascript"></Script>  <Script>window.onload= function () {       NewUploadpreview ({upbtn:"Photo", Divshow:"Imgdiv", Imgshow:"Imgshow" }); }  </Script></Head><Body><!--Upload Note 1, you need to put the file upload component in the form 2, the submission must be post3, the form type must be composite form data (contains the file type, and can be normal data) 4,file form type label must contain the Name property -<DivID= "Imgdiv"><imgID= "Imgshow"width= "$"src= "404.jpg"/></Div><formAction= "FileUpload"Method= "POST"enctype= "Multipart/form-data">Avatar:<inputtype= "File"ID= "Photo"name= "Photo"value=""/>        <BR><inputtype= "Submit"ID= "BTN"value= "Upload"/></form><Scripttype= "Text/javascript">document.getElementById ("btn"). onclick=function() {alert (document.getElementById ("Photo"). Value); }</Script></Body></HTML>

Plugin code:

/** Published: December 12, 2014 * Plugin description: Image upload local preview plugin compatible browser (IE Google Firefox) does not support safari of course, if the use of these kernel browser is basically compatible with * usage: * Interface Construction (img tag must have div And you must give the DIV control ID) * <div id= "imgdiv" ></div>* <input Type = "File" id= "up_img"/>* Calling code: * New Uploadpreview ({upbtn: "up_img", Divshow: "Imgdiv", Imgshow: "Imgshow"}); * Parameter description: *UPB TN: 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: After selecting the file callback method; * Version: v1.4 update the following: 1. Fix callback. * Version: v1.3 the following: 1. Fix the multi-level framework to get the path bug.2. Remove dependencies on jquery plugins.*//**work: Image Preview Plugin*/varUploadpreview =function(setting) {/**work:this (current object)*/  var_self = This; /**work: null or null value is judged*/_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, 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) {varURL =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); }    returnURL; }  /**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) {vardiv =document.getElementById (_self.            Setting.divshow);  This. Select ();            Top.parent.document.body.focus (); varsrc =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: Performing a binding event*/_self. Bind ();}

Preview Plugin when uploading images

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More