JS Verify picture format and size and preview a simple example _javascript tips

The

instance is as follows:

function Photocheck (obj) {var ff = $ ("#photoSrc"). Val ();
    if (ff = NULL | | ff = = "") {return;
    } Photo_flag = true;
    var fsize = 50.9 * 1024;
    var FileType;
    var fileSize;
    var FilePath; if (obj.files) {//WebKit, Mozilla ...
      (Jq:$.support.boxmodel)//FF & chrome var reader = new FileReader ();
      var thisfile = obj.files[0];  var isfirefox=navigator.useragent.indexof ("Firefox");
      FF get picture size FileType = Thisfile.type; fileSize = isfirefox > 0? 
      ThisFile.size:thisFile.fileSize;
      
      Reader.readasdataurl (Thisfile);
        Reader.onloadend = function (event) {var imgobj = new Image (); IMGOBJ.SRC = Event.target.result;
          Image src Imgobj.onload = function (event) {FilePath = THIS.SRC;
          if (Photo_flag) {$ ("#imgShow"). attr ("src", filePath);
  else {$ (' #imgShow '). attr ("src", "<%=request.getcontextpath ()%>/usertx/default.jpg");        }}} else {/////////////////////////////////////////////ie obj.select ();
      var path = Document.selection.createRange (). text; 
      var img = new Image (); 
      
      IMG.SRC = path; 
      var fileType = path.substring (path.length-4,path.length);
      if (img.readystate = = "complete") {fileSize = img.filesize; else {img.onreadystatechange=function () {if (img.readystate== ' complete ') {//When picture load is complete fil
             Esize = img.filesize; if (FileSize > Fsize) {setmsg (' photosrc_msg ', ' The picture is too big!)
              ', ' Reg_wrong ');
              Photo_flag = false;
              $ ("#imgShow"). attr ("src", "<%=request.getcontextpath ()%>/usertx/default.jpg");
            Return
      }} if (path) {filePath = path; } if (FileType!= ". jpg" && fileType!=). JPG "&& fileType!=" Image/jpeg ") {//image/jpeg setmsg ('Photosrc_msg ', ' Picture format wrong!
      ', ' Reg_wrong ');
      Photo_flag = false;
      $ ("#imgShow"). attr ("src", "<%=request.getcontextpath ()%>/usertx/default.jpg");
    Return } if (FileSize > Fsize) {setmsg (' photosrc_msg ', ' picture is too big!)
      ', ' Reg_wrong ');
      Photo_flag = false;
      $ ("#imgShow"). attr ("src", "<%=request.getcontextpath ()%>/usertx/default.jpg");
    Return
    } setmsg (' photosrc_msg ', ' correct ', ' REG_OK ');
    if (Photo_flag) {$ ("#imgShow"). attr ("src", filePath);
    else {$ (' #imgShow '). attr ("src", "<%=request.getcontextpath ()%>/usertx/default.jpg"); }
  }

Validation for uploading a picture

The above code is explained below:

The following is a user to upload the image format and size of the method, in the user registration when the user asked to upload the avatar when the validation. I gave the most detailed comment in the method.

<script type= "Text/javascript" > Function Photocheck (obj) {var ff = $ ("#photoSrc"). Val ();
  Gets the path of the file if (ff = NULL | | ff = = "") {return;
  } Photo_flag = true;
  var fsize = 50.9 * 1024;//set image size to 50kb, where you can set your own var FileType;
  var fileSize;
　　　var FilePath; if (obj.files) {//Obj.files is the scene of the Chrome,firefox browser, if it is ie, his value is false var reader = new FileReader ();//This Filere
    Ader will be described in more detail later, noting that only the Firefox 3.6+ and Chrome 6.0+ implement the FileReader interface. 
　　var thisfile = obj.files[0];//Gets the file's pair like Var isfirefox=navigator.useragent.indexof ("Firefox");
Note that this is the current user to determine which browser is used, if the return value is greater than 0, then the browser is the current browser, such as Isfirefox>0 appeal is the Firefox fileType = Thisfile.type; Get the type of file, in general, if the type is image/jpeg,.jpg,.gif and so on picture format is reasonable filesize=thisfile.size;//get the size of the currently uploaded file FileSize = Isfirefox & Gt 0? 
ThisFile.size:thisFile.fileSize;
    If it is Firefox, call Reader.readasdataurl (Thisfile); Readasdataurl: This method reads a file as a string that begins with data: The essence of the string is that the data Uri,data URI is a scheme for embedding small files directly into a document.The small file here usually refers to the image and HTML format of the file Reader.onloadend = function (event) {//file read successfully completed when the trigger var imgobj = new Image (); IMGOBJ.SRC = Event.target.result;
        
        Image Path Imgobj.onload = function (event) {//Picture loaded after FilePath = THIS.SRC; if (Photo_flag) {$ ("#imgShow"). attr ("src", filePath);//Set Picture as the currently uploaded picture path} else {$ ("#imgShow"). A
TTR ("src", "default.jpg");
    Otherwise set the default picture}}} else {//if it is IE obj.select ();
var path = Document.selection.createRange (). text; 
    ie return upload when the selected file path var img = new Image (); 
    
    IMG.SRC = path; 
    var fileType = path.substring (path.length-4,path.length);
    if (img.readystate = = "complete") {//Picture loading complete, get picture size fileSize = img.filesize;  else {img.onreadystatechange=function () {if (img.readystate== ' complete ') {//When picture load is complete fileSize
           = Img.filesize;
         if (FileSize > fsize) {photo_flag = false;   $ ("#imgShow"). attr ("src", "default.jpg");
          Return
    }} if (path) {filePath = path; }///Picture format is judged if (FileType!= ". jpg" && fileType!=).
    JPG "&& fileType!=" Image/jpeg ") {Photo_flag = false;
    $ ("#imgShow"). attr ("src", "default.jpg");
  Return } if (FileSize > Fsize) {alert ("The picture is too big!)
    ");
    Photo_flag = false;
    $ ("#imgShow"). attr ("src", "default.jpg");
  Return
  } if (Photo_flag) {$ ("#imgShow"). attr ("src", filePath);
  else {$ (' #imgShow '). attr ("src", "default.jpg"); } </script>  

If the avatar is uploaded under Chrome, the SRC path we're looking at will find

It is found that this method reads the file as a string that begins with data: As described above, it is the role of Readasdataurl in FileReader, which is described below FileReader

Method Name Parameter Description

Abort

None

Interrupt Read
Readasbinarystring

File

To read a file as a binary code

Readasdataurl

File

Read the file as Dataurl

Readastext

file, [encoding]

To read a file as text

Readastext: The method has two parameters, where the second parameter is the encoding of the text, and the default value is UTF-8. This method is very easy to understand, read the file as text, read the result is the content of this text file. Readasbinarystring: It reads the file as a binary string, and usually we pass it to the back end, which can store the file through this string. Readasdataurl: This is the method used by the example program, which reads a file as a string that begins with data: The essence of the string is that the data Uri,data URI is a scheme for embedding small files directly into a document. Small files here usually refer to files in formats such as images and HTML.

FileReader also has the following events

Event description

Onabort
triggered when interrupted

OnError
Triggered when an error occurs

OnLoad
Trigger when file read completes successfully

Onloadend
Read complete trigger, regardless of success or failure

Onloadstart
Trigger at start of Read

OnProgress
In read

Once the file begins to read, either successfully or unsuccessfully, the result property of the instance is populated. If the read fails, the value of result is null, otherwise it is read, and most programs crawl the value when the file is successfully read.

The above is small series for everyone to bring the JS verify picture format and size and preview of the simple example of all the content, I hope that we support the cloud-Habitat Community ~