Local preview instance before Javascript Image Upload

The upload and preview functions of images are mainly used to preview the effects of images before they are uploaded. Currently, the mainstream methods include js, jquery, and flash, however, we generally use js to implement the Image Upload preview function. The following is an example.

Principle:

Two steps: when the input of the uploaded image is triggered and a local image is selected, the URL of the object (Object URL) of the image to be uploaded is obtained ); assign the object URL to the src attribute of the previously written img tag to display the image.

Here, we need to understand the File object, Blob Object and window. URL. createObjectURL () method in Javascript.

File object:

The File object can be used to obtain information about a File and read the content of the File. generally, a File object is a FileList object returned after you select a File on an input element. It can also be a DataTransfer object generated by drag-and-drop operations.
The following describes how to obtain the FileList object:

Copy codeThe Code is as follows:
<Script type = "text/javascript" src = "jquery. js"> </script>
<Input id = "upload" type = "file">

<Script type = "text/javascript">
$ ('# Upload'). change (function (){
// Obtain the first element of FileList
Alert (document. getelementbyid ('upload'). files [0]);
});
</Script>

Blob Object:

A Blob Object is a class file object that contains read-only raw data. data in Blob objects is not necessarily in the native form of JavaScript. the File interface is based on Blob, inherits the Blob function, and supports the extension of local files on the user's computer.
The object URL we want to obtain is actually obtained from the Blob object, because the File interface inherits Blob. The following describes how to convert a Blob object to a URL:

Copy codeThe Code is 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 chrome
For IE browser, you can directly use the input value to replace src.
You can directly use the getAsDataURL () method of the File object to obtain the URL. Now, this method has been abolished, and similar methods include getAsText () and getAsBinary, let's look at this example.

Copy codeThe Code is as follows:
Function getFullPath (obj) {// obtain the complete path of the image.
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 for obtaining the client image.
We will limit its size and format.

Copy codeThe Code is as follows:
$ ("# LoadFile"). change (function (){
Var strSrc = $ ("# loadFile"). val ();
Img = new Image ();
Img. src = getFullPath (strSrc );
// Verify that the format of the uploaded file is correct
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 image must be JPG ");
Return false;
}
// Verify the width and height of the uploaded file

If (img. height/img. width> 1.5 | img. height/img. width <1.25 ){
Alert ("the proportion of the image you uploaded exceeds the range, and the aspect ratio should be between 1.25-1.5 ");
Return;
}
// Verify whether the size of the uploaded file has exceeded
If (img. fileSize/1024> 150 ){
Alert ("the size of the file you uploaded exceeds the limit of KB! ");
Return false;
}

LoadFile is the id of the html input file. In its change event, that is, after selecting the file to be uploaded, will the image be displayed in the image box? Add the following code at the end of the above Code

Copy codeThe Code is as follows:
$ ("# StuPic"). attr ("src", getFullPath (this ));

Now that jQuery is used, let's share another example of code written with jQuery:

Copy codeThe Code is as follows:
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head id = "Head1">
<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 .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>
</Head>
<Body>
<Form name = "form1" id = "form1">
<Div id = "demo">
<Input id = "f1" name = "f1" type = "file"/>

</Div>
<Div id = "large"> </div>
</Form>
</Body>
</Html>