Use the file tag to upload and preview multi-graph files

This article describes how to use the file label to upload and preview multi-graph files. It has good reference value. Let's take a look at it together with the small Editor. Js Code:

Script // The function setImagePreviews (avalue) {var docObj = document. getElementById ("files"); var dd = document. getElementById ("preview"); dd. innerHTML = ""; var fileList = docObj. files; for (var I = 0; I <fileList. length; I ++) {dd. innerHTML + ="
  
"; Var imgObjPreview = document. getElementById ("img" + I); if (docObj. files & docObj. files [I]) {// under Firefox, set the img attribute imgObjPreview directly. style. display = 'block'; // controls the thumbnail size imgObjPreview. style. width = '70px '; imgObjPreview. style. height = '70px '; // imgObjPreview. src = docObj. files [0]. getAsDataURL (); // Firefox 7 or later versions cannot be obtained using the preceding getAsDataURL () method. You need to use the following method: imgObjPreview. src = window. URL. createObjectURL (docObj. files [I]);} else {// Use the filter docObj in IE. select (); var imgSrc = document. selection. createRange (). text; alert (imgSrc) var localImagId = document. getElementById ("img" + I); // The initial size must be set to localImagId. style. width = "70px"; localImagId. style. height = "70px"; // 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 ("DXImageTransfo Rm. Microsoft. AlphaImageLoader "). src = imgSrc;} catch (e) {alert (" the format of the uploaded image is incorrect. Please reselect it! "); Return false;} imgObjPreview. style. display = 'none'; document. selection. empty () ;}} return true;} script

HTML code:

For more information about how to use the file tag to upload and preview multi-graph files, see PHP!