Javascript-based front-end page _ javascript

This article mainly introduces how to use javascript to upload images and display them on the front-end page. The code is very simple. If you need it, you can refer to the next article. This article mainly uses javascript code analysis to upload images to the front-end page, if you don't talk much about it, paste the Code directly.

Sample Code 1:

Script // check whether the image format is correct and implement the preview function setImagePreview (obj, localImagId, imgObjPreview) {var array = new Array ('gif', 'jpeg ', 'png ', 'jpg', 'bmp '); // if (obj. value = '') {$. messager. alert ("prompt", "Let's select the image to upload! "); Flag = false; return false;} else {var fileContentType = obj. value. match (/^ (. *)(\.) (. {}) $/) [3]; // This file type is useful for regular expressions. // The Boolean variable var isExists = false; var objValue = obj. value; try {// determine the size of the file to be uploaded by IE var fso = new ActiveXObject ("Scripting. fileSystemObject "); fileLenth = parseInt (fso. getFile (objValue ). size);} catch (e) {try {// the size of the file to be uploaded for non-IE obtaining fileLenth = parseInt (obj. files [0]. size);} catch (e) {Flag = false; return false ;}// cyclically checks whether the image format is correct for (var I in array) {if (fileContentType. toLowerCase () = array [I]. toLowerCase () {// set the image size if (obj. files & obj. files [0]) {// under Firefox, set the img attribute imgObjPreview directly. style. display = 'block'; imgObjPreview. style. width = '180px '; imgObjPreview. style. height = '200px '; // Firefox 7 or later versions cannot be obtained using the getAsDataURL () method. You need to use the imgObjPreview method. src = window. URL. CRES AteObjectURL (obj. files [0]); if (fileLenth> 102400) {$. messager. alert ("prompt", "select an image smaller than kb! "); Flag = false; return false ;}} use the filter obj in else {// IE. select (); var imgSrc = document. selection. createRange (). text; // The initial size must be set to localImagId. style. width = "180px"; localImagId. style. height = "200px"; // capture Abnormal images to prevent users from modifying the suffix to counterfeit images. try {localImagId. style. filter = "progid: DXImageTransform. microsoft. alphaImageLoader (sizingMethod = scale) "; localImagId. filters. item ("DXImageTransform. microsoft. alphaImageLoade R "). src = imgSrc;} catch (e) {$. messager. alert (" prompt "," the format of the uploaded image is incorrect. Please reselect it! "); Flag = false; return false;} imgObjPreview. style. display = 'none'; document. selection. empty () ;}isexists = true; flag = true; return true ;}} if (isExists = false) {$. messager. alert ("prompt", "Incorrect Image Upload type! "); Flag = false; return false;} script    Upload photo:                        Overview:         
           
        

Sample Code 2:

      
    ImageDialog Examples