JavaScript implementation does not upload pictures direct local preview

Principle

is divided into two steps: when the upload image input is triggered and select a local image to upload the image of the object URL (object URL); Assign the object URL to the pre-written img tag src attribute can display the picture.

Here we need to learn about the file objects, BLOB objects, and Window.URL.createObjectURL () methods in JavaScript.

File Object

The file object can be used to retrieve information about a file, and it can be used to read the contents of it. Typically, a file object is a FileList object that is returned after a user selects a file on an INPUT element, or from a DataTransfer object generated by a drag-and-drop operation .
Here's a look at getting the FileList object:

The code is as follows	Copy Code
<script type= "Text/javascript" src= "Jquery.js" ></script> <input id= "Upload" type= "file" > <script type= "Text/javascript" > $ (' #upload '). Change (function () { Gets the first element of the FileList Alert (document.getElementById (' upload '). Files[0]); }); </script>

Blob Object

A Blob object is a class file object that contains read-only raw data. The data in a BLOB object is not necessarily the native form of JavaScript. The file interface is based on a blob, inherits the functionality of the Blob, and extends support for local files on the user's computer.
The object URL we want to get is actually obtained from the Blob object because the file's interface inherits the Blob. Here's how to convert a Blob object to a URL:

The code is as follows	Copy Code
<script type= "Text/javascript" > var f = document.getElementById (' upload '). Files[0]; var src = window. Url.createobjecturl (f); document.getElementById (' preview '). src = src; </script>

Compatibility

This method applies to Chrome browser
If IE browser can use the value of input directly instead of SRC
Online viewing data has a direct use of the file Object Getasdataurl () method to obtain the URL, now this method has been abolished , similar to the Getastext () and Getasbinary () methods, let's look at an example.

code is as follows

copy code

function GetFullPath (obj) {   //Get Picture full path    & nbsp;  if (obj) {  //ie  if (window.navigator.userAgent.indexOf ("MSIE") >= 1) {  &NB sp;   obj.select ();      return Document.selection.createRange () .text;  }  //firefox  Else if (window.navigator.userAgent.indexOf ("Firefox") >= 1) {   &nbs p;  if (obj.files) {  return Obj.files.item (0). Getasdataurl ();     }      return obj.value;  }  return obj.value;     }  }

This code is the complete path to get the client picture

We'll limit its size and format

The code is as follows

Copy Code

$ ("#loadFile"). Change (function () { var strsrc = $ ("#loadFile"). Val (); img = new Image (); IMG.SRC = GetFullPath (STRSRC); Verify that the upload file is in the correct format var pos = Strsrc.lastindexof ("."); var LastName = strsrc.substring (pos, strsrc.length) if (Lastname.tolowercase ()!= ". jpg") { Alert ("The file type you uploaded is" + LastName + "and the picture must be of type JPG"); return false; } Verify that the upload file has a wide and high ratio if (Img.height/img.width > 1.5 | | img.height/img.width < 1.25) { Alert ("The proportion of your uploaded picture is out of range, the ratio of width to height should be between 1.25-1.5"); Return } Verify that the upload file is out of size if (img.filesize/1024 > 150) { Alert ("The size of the file you uploaded exceeds the 150K limit!") "); return false; }

Its
, this loadfile is the ID of the HTML input file. In its change event, that is, after selecting the file to upload, let the picture appear in the picture frame, at the end of the above code add the following code

The code is as follows	Copy Code
$ ("#stuPic"). attr ("src", GetFullPath (this));

Now that we've used jquery, let's share a jquery-written

The code is as follows

Copy Code

<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/> <script type= "Text/javascript" src= "Jquery.js" ></script> <script language= "JavaScript" > $ (function () { var ei = $ ("#large"); Ei.hide (); $ ("#img1"). MouseMove (function (e) { Ei.css ({Top:e.pagey,left:e.pagex}). html (' '). Show (); }). mouseout (function () { Ei.hide ("slow"); }) $ ("#f1"). Change (function () { $ ("#img1"). attr ("src", "file:///" +$ ("#f1"). Val ()); }) }); </script> <style type= "Text/css" > #large {position:absolute;display:none;z-index:999;} </style> <body> <form name= "Form1" Id= "Form1" > <div id= "Demo" > <input id= "F1" name= "F1" type= "file"/> </div> <div id= "Large" ></div> </form> </body>