JavaScript image upload Local preview instance _javascript tips

Image upload Preview function is mainly used in front of the picture upload a preview of the effect, the current mainstream methods are mainly js,jquery and flash implementation, but we will generally use JS to achieve the image upload preview function, below to see an example.

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:

Copy Code code as follows:

<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:

Copy Code code as follows:

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

Compatibility:

The above method applies to the Chrome browser
If it is IE browser can directly use the value of input to replace SRC
This method has been abolished and similar to the Getastext () and Getasbinary () methods, which are used to get URLs directly using the Getasdataurl () method of the file object, we look at such an example.

Copy Code code as follows:

function GetFullPath (obj) {//Get full path to picture
if (obj) {
Ie
if (Window.navigator.userAgent.indexOf ("MSIE") >= 1) {
Obj.select ();
Return Document.selection.createRange (). text;
}
Firefox
else if (window.navigator.userAgent.indexOf ("Firefox") >= 1) {
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

Copy Code code as follows:

$ ("#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;
}

Where 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

Copy Code code as follows:

$ ("#stuPic"). attr ("src", GetFullPath (this));

Now that we've used jquery, let's share a code example written in jquery:

Copy Code code as follows:

<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>