Image upload function based on Asp.net+easyui frame (judgment format + Instant browsing) _ Practical skills

Based on asp.net +easyui frame upload picture, judge format + realize instant browsing, the specific contents are as follows

<div>
  Select pictures: <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 picture--%>
   
</div>

<script>/Check that the picture is in the correct format, and implement preview function Setimagepreview (obj, Localimagid, Imgobjpreview) {var array = New Array (' gif ', ' jpeg ', ' png ', ' jpg ', ' bmp ');
        Can upload file type if (Obj.value = = ") {$.messager.alert (" Let's choose the picture to upload! ");
      return false; else {var filecontenttype = Obj.value.match (/^ (. *) (\.) (. {1,8}) $/) [3];
        This file type is very useful////Boolean variable var isexists = false;
            Loop to determine if the picture is in the correct format for (var i in array) {if (filecontenttype.tolowercase () = Array[i].tolowercase ()) { 
              After the picture is formatted correctly, depending on the browser, set the size of the picture if (Obj.files && obj.files[0]) {//Firefox, directly set the IMG attribute
              ImgObjPreview.style.display = ' block ';
              ImgObjPreview.style.width = ' 400px ';
              ImgObjPreview.style.height = ' 400px '; Firefox 7 version can not be used above the Getasdataurl () way to obtain, need a way imgobjpreview.src = window.
            Url.createobjecturl (Obj.files[0]);
} else {              ie, use the filter Obj.select ();
              var imgsrc = Document.selection.createRange (). text;
              The initial size must be set localImagId.style.width = "400px";
              LocalImagId.style.height = "400px"; The capture of the image exception prevents the user from modifying the suffix to forge the picture try {localImagId.style.filter = "Progid:DXImageTransform.Microsoft .
                AlphaImageLoader (Sizingmethod=scale) ";
              LocalImagId.filters.item ("DXImageTransform.Microsoft.AlphaImageLoader"). src = imgsrc;
                catch (E) {$.messager.alert ("The picture you uploaded is not in the correct format, please choose again!");
              return false;
              } ImgObjPreview.style.display = ' none ';
            Document.selection.empty ();
            } isexists = true;
          return true;
          } if (Isexists = False) {$.messager.alert ("Incorrect upload image type!");
        return false;
      return false;

   }
    } Display picture function over (Imgid, obj, imgbig) {//large figure showing maximum size of 4:3 maxwidth = 400;

      MaxHeight = 300;
      Show obj.style.display = "";

      IMGBIG.SRC = IMGID.SRC; 1, width and height are more than, to see who more than, who is more than to set who is the maximum, the remaining policies in accordance with 2, 3//2, if the width exceeds and high no super, set width to maximum//3, if the width is not more than and higher than, set high to Maximum if (img . width > MaxWidth && img.height > MaxHeight) {pare = (img.width-maxwidth)-(Img.height-maxheig
        HT);
        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 Effect Chart:

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.