Javascript-based front-end page _ javascript

Source: Internet
Author: User
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   
Related Article

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: 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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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