Home > Article > Web Front-end > Example of local preview before Javascript image upload_javascript skills

Example of local preview before Javascript image upload_javascript skills

WBOYOriginal: 2016-05-16 16:44:161409browse

The image upload preview function is mainly used to preview an effect before the image is uploaded. The current mainstream methods mainly include js, jquery and flash, but we generally use js to implement the image upload preview function. Let’s take a look at one example.

Principle:

It is divided into two steps: when the input of uploading the image is triggered and the local image is selected, obtain the URL of the object of the image to be uploaded (object URL); assign the object URL to the src attribute of the pre-written img tag. Show the picture.

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

File object:

File object can be used to obtain information about a file, and can also be used to read the contents of this file. Usually, the File object is the FileList object returned after the user selects a file on an input element, or it can It comes from the DataTransfer object generated by drag and drop operation.
Let’s look at getting the FileList object:

Copy code The code is as follows:

Blob object:

A Blob object is a file-like object containing read-only raw data. The data in the Blob object does not necessarily have to be in the native form in JavaScript. The File interface is based on Blob, inherits the functions of Blob, and extends support A local file on the user's computer.
The object URL we want to get is actually obtained from the Blob object, because the File interface inherits Blob. Let’s convert the Blob object into a URL:

Copy code The code is as follows:

Compatibility:

The above method is applicable to chrome browser
If it is IE browser, you can directly use the input value instead of src
To view information online, you can directly use the getAsDataURL() method of the File object to obtain the URL. Now this method All have been abolished. Similar methods include getAsText() and getAsBinary(). Let's take a look at such an example.

Copy code The code is as follows:

function getFullPath(obj) { //Get the complete picture Path 
 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 to get the complete path of the client image
We will limit its size and format

Copy code The code is as follows:

$("#loadFile").change(function () { 
var strSrc = $("#loadFile").val(); 
img = new Image(); 
img.src = getFullPath(strSrc); 
//Verify whether the uploaded file format 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 of JPG type"); 
 return false; 
} 
//Verify the aspect ratio of the uploaded file 

if (img.height / img.width > 1.5 || img.height / img.width < 1.25) { 
 alert("The ratio of the image you uploaded is out of range, the aspect ratio should be between 1.25-1.5"); 
 return; 
} 
//Verify whether the uploaded file exceeds the size 
if (img .fileSize / 1024 > 150) { 
 alert("The file size you uploaded exceeds the 150K limit!"); 
 return false; 
} 

Among them, loadFile is the id of the html input file. In its change event, that is, after selecting the file to be uploaded, do you want the image to be displayed in the picture box? Add the following code at the end of the above code

Copy code The code is as follows:

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

Since jQuery is used, let’s share an example of code written with jQuery:

Copy code The code is as follows: