jquery Gets the picture size and controls the image file upload size and how to preview the picture file

First we look at:

Click Upload following:

Here I get the size of the file, and if it exceeds the size I set, then prohibit uploading!

Not much to say, on the code:
Look at the div layout first:

<Divclass= "Imagecontainer">                                                    <inputID= "thumbnail"name= "thumbnail"Required=""type= "File"size= "+">                                                    <Divclass= "Previewdiv">                                                        <Divclass= "Upload-icon">                                                            <Iclass= "fa fa-arrow-up"></I>                                                        </Div>                                                        <Divclass= "Upload-text">Uploading files</Div>                                                        <ImageID= "ShowImage"></Image>                                                    </Div>                                                </Div>

Let's analyze the layout.

First, the outer div has a imagecontainer, which indicates that it is a container for loading pictures and Input:file boxes.

Then, under the container, is the input box of the file we uploaded, I set it to transparent, and the same size as the outer imagecontainer, so that you can click into the input control, no matter where you click on the outer layer. (Note: In IE8 and IE10 to click two times to pop up the upload file dialog box).

Underneath the controls is the container for the picture we want to preview. Then class= "Upload-icon" is the icon of the uploaded file that was loaded at the beginning.

Id= "ShowImage" is our preview of the image, its src will be set in JS.

The following is the CSS style for the layout:

. fileerror{    color:red;    font-weight:600;} #thumbnail {    display:inline-block;} #showImage {    display:inline-block;    width:100%;    height:100%;    -webkit-border-radius:100%;    -moz-border-radius:100%;    border-radius:100%;    Position:absolute;}. imagecontainer{    position:relative;}. Imagecontainer input{    width:150px;    height:150px;    opacity:0;    Position:absolute;    z-index:20;}. previewdiv{    width:150px;    height:150px;    -webkit-border-radius:100%;    -moz-border-radius:100%;    border-radius:100%;    position:relative;    Background: #f6f6f6;    border:1px solid #00a0e9;}. upload-icon{    Position:absolute;    top:30%;    left:37%;}. fa-arrow-up{    font-size:40px!important;}. upload-text{    Position:absolute;    top:58%;    left:31%;}

Let's look at the JS code here:

<script>    $(function () {      $("#thumbnail"). Change (function () {          varfileSize; //compatible with older versions of IE          if($.support.msie) {varFilemgr =NewActiveXObject ("Scripting.FileSystemObject"); varFilePath = $ ( This) [0].value; varFileobj =Filemgr.getfile (FilePath); FileSize= fileobj[0].size/1024;//bytes}Else{              //gets the file size, divided by 1024, to get the number of bytes in the file-->kbFileSize = $ ( This) [0].files[0].size/1024;          }            //if the file is larger than 100KB          if(FileSize > 100){              //error prompt, using a div to load$ (". Fileerror"). Text ("The file you uploaded exceeds the size, please re-upload!") "); //make the Submit button non-checked, avoid file size and still commit$ ("#submit"). attr ("Disabled",true); }Else{              $(". Fileerror"). Text (""); $("#submit"). attr ("Disabled",false); } console.log ($ ( This))            //low version IE does not support FileReader          //FileReader reads the base64 encoding of the file, which reads the contents of the file itself          if(typeof(filereader)! = "undefined") {              //A regular expression that determines whether the file ends with these suffix names (all the suffix names of the pictures)              varRegex =/(. Jpg|. Jpeg|. Gif|. Png|. BMP) $/; //Gets the Files property under the current object, and then introduces the contents of the Files property                  varFile = $ ( This) [0].files; //Regular expression matching                //file[0].name---> Get the file name for the change                  if(Regex.test (file[0].name.tolowercase ())) {//instantiating an object                      varReader =NewFileReader (); //load the objectReader.onload =function(e) {//E.target.result is the base64 encoding of the image, set showimage src by jquery$ ("#showImage"). attr ("src"), E.target.result);                      }; Reader.readasdataurl (file[0]);//in order to be compatible with IE, no this code IE can not implement}Else{alert (file[0].name + "Not a valid picture"); return false; }          } Else{alert ("The browser does not support picture previews."); }      })    })</script>

Some of the above data are explained in detail:

Console.log ($ (this)): data obtained such as (note: to beprinted before typeof (filereader)! = "undefined"):

Then $ (this) [0] Gets the input object, which has the following properties and methods, one of the files properties we need.

Print the files and see what's Inside:

Console.log ($ (this) [0].files), as follows:

We found that it was an array of objects, and the No. 0 element was an object named file, so we could have the same "." The way to get to the inside of the property, for example, say:

Name---> File names

Size----> File sizes

Type----> file types and suffix names (JPEG)

lastmodified----"Last Modified time

So how does the picture show up in front of us?

Look at the following code:

                       function (e) {                          //E.target.result is the base64 encoding for the image, set the        src $ showimage by jquery                          $ ("# ShowImage "). attr (" src ", e.target.result);            

So what is E.target.result?

This is the above a string of things, this is the picture through the base64 code, the above this lump assigned to SRC, the picture will be able to display the normal.

jquery Gets the picture size and controls the picture file upload size and how to preview the picture when the slice file