The image upload function is implemented based on ASP. NET + easyUI framework (Judgment format + instant browsing ),

The image upload function is implemented based on ASP. NET + easyUI framework (Judgment format + instant browsing ),

Upload images based on the ASP. Net + easyUI framework, determine the format + implement real-time browsing, the specific content is as follows

<Div> select image: <input id = "idFile" style = "width: 224px" runat = "server" name = "pic" onchange = "javascript: setImagePreview (this, localImag, preview); "type =" file "/> </div> preview: <div id =" localImag "> <% -- preview, default image -- %>  </div>

<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 ("Let's select the image to upload! "); Return false;} else {var fileContentType = obj. value. match (/^ (. *)(\.) (. {}) $/) [3]; // This file type is useful for regular expressions. // The Boolean variable var isExists = false; // cyclically determine 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 = '400px '; imgObjPrevi Ew. style. height = '400p'; // Firefox 7 or later versions cannot be obtained using the getAsDataURL () method. You need to use the imgObjPreview method. src = window. URL. createObjectURL (obj. files [0]);} under else {// IE, use the filter obj. select (); var imgSrc = document. selection. createRange (). text; // The initial size must be set to localImagId. style. width = "400px"; localImagId. style. height = "400px"; // capture Abnormal images to prevent users from modifying the suffix to counterfeit images. try {localImagId. style. filter = "progid: DXImageTransform. microsoft. alphaImage Loader (sizingMethod = scale) "; localImagId. filters. item ("DXImageTransform. microsoft. alphaImageLoader "). src = imgSrc;} catch (e) {$. messager. alert ("the format of the image you uploaded is incorrect. Please select another one! "); Return false;} imgObjPreview. style. display = 'none'; document. selection. empty () ;}isexists = true; return true ;}} if (isExists = false) {$. messager. alert ("the upload image type is incorrect! "); Return false;} // display the image function over (imgid, obj, imgbig) {// The maximum size displayed in a large image is 4 to 3. The size is 400 300. maxwidth = 400; maxheight = 300; // display obj. style. display = ""; imgbig. src = imgid. src; // 1. The width and height are greater than the maximum value, the remaining policies are 2, 3 // 2. If the width is exceeded and the height is not exceeded, set the width to the maximum value // 3. If the width is not exceeded and the height is exceeded, set the height to the maximum value if (img. width> maxwidth & img. height> maxheight) {pare = (img. width-maxwidth)-(img. height-maxheight); if (pare> = 0) img. width = maxwidth; else img. height = maxheight;} else if (img. width> maxwidth & img. height <= maxheight) {img. width = maxwidth;} else if (img. width <= maxwidth & img. height> maxheight) {img. height = maxheight ;}</script>

Interface:

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.