Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > Example of local preview before Javascript image upload_javascript skills

Example of local preview before Javascript image upload_javascript skills

WBOY
Release： 2016-05-16 16:44:16
Original
1439 people have browsed it

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:


















Related labels：
javascript
source：php.cn
Previous article：jQuery implements simple web page mask layer/pop-up layer effect compatible with IE6 and IE7_jquery Next article：jquery web page return to top effect (icon fade, self-writing)_jquery
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
CSS only method to dynamically modify image src on click without using JavaScript I need to change the src of an image on mouse click using only css like img:active{}
From 2024-04-06 19:25:49
0
1
505
Scatterplot points do not maintain values ​​when zooming in d3.js This is my first time using d3.js, so please bear with me. I implemented it as pure JavaSc...
From 2024-04-06 18:16:26
0
1
403
JavaScript hover events on vendor-specific pseudo-elements I have the following htmlinput tag. $("input[type='range']::-webkit-slider-thumb"...
From 2024-04-06 15:35:24
0
1
274
Submit form without button using Javascript/Jquery I'm trying to submit a form without a button by calling a JavaScript function and executin...
From 2024-04-06 14:54:03
0
2
421
Customize the appearance of Bootstrap accordion headers using the CollapseDisplay class I want to style the card title of a panel with class collapseshow. In this example, it's t...
From 2024-04-06 12:53:11
0
1
376
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template