The image upload preview function is mainly used to preview an effect before image upload. Currently, the mainstream methods mainly include js, jquery and flash implementation, but we generally use js to implement the image upload preview function. Let’s take a look at an example below.
principle:
It is divided into two steps: when the input of uploading the image is triggered and the local image is selected, the URL (object URL) of the object to be uploaded; assign the object URL to the src attribute of the pre-written img tag to display the image.
Here, we need to understand the File object, Blob object and () method in Javascript.
File object:
The File object can be used to obtain information about a file, and can also be used to read the content of the file. Generally, the File object is from the FileList object returned by the user after selecting a file on an input element, or it can be a DataTransfer object generated by free drag and drop operations.
Let's take a look at getting the FileList object:
<script type="text/javascript" src=""></script>
<input type="file">
<img src="">
<script type="text/javascript">
$('#upload').change(function(){
// Get the first element of FileList
alert(('upload').files[0]);
});
</script>
Blob Object:
A Blob object is a file-like object containing read-only raw data. The data in a Blob object does not necessarily have to be a native form in JavaScript. The File interface is based on Blob, inherits the functions of Blob, and extends to support local files on the user's computer.
The object URL we want to get is actually obtained from the Blob object, because the File interface inherits the Blob. Here is the conversion of the Blob object into a URL:
<script type="text/javascript">
var f = ('upload').files[0];
var src = (f);
('preview').src = src;
</script>
compatibility:
The above method is suitable for chrome browser
If it is an 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 get the URL. Now this method has been abolished. Similarly, there are getAsText() and getAsBinary() methods. Let's take a look at such an example.
function getFullPath(obj) { //Get the full path of the picture
if (obj) {
//ie
if (("MSIE") >= 1) {
();
return ().text;
}
//firefox
else if (("Firefox") >= 1) {
if () {
return (0).getAsDataURL();
}
return ;
}
return ;
}
}
This code is the complete path to get the client image
We will limit its size and format
$("#loadFile").change(function () {
var strSrc = $("#loadFile").val();
img = new Image();
= getFullPath(strSrc);
//Verify whether the uploaded file format is correct.
var pos = (".");
var lastname = (pos, )
if (() != ".jpg") {
alert("The file type you upload is "+ lastname + ", the image must be of JPG type");
return false;
}
//Verify the aspect ratio of uploaded files
if ( / > 1.5 || / < 1.25) {
alert("The proportion of the pictures you upload exceeds the range, and the aspect ratio should be between 1.25-1.5");
return;
}
//Verify whether the uploaded file exceeds the size
if ( / 1024 > 150) {
alert("The file size you upload exceeds the 150K limit!");
return false;
}
Among them, loadFile is the id of the html input file. After its change event, that is, after selecting the file to be uploaded, let the image be displayed in the picture box? Add the following code to the end of the above code
$("#stuPic").attr("src", getFullPath(this));
Since jQuery is used, let’s share another code example written in jQuery:
<html xmlns="http:///1999/xhtml" >
<head >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src=""></script>
<script language="javascript">
$(function(){
var ei = $("#large");
();
$("#img1").mousemove(function(e){
({top:,left:}).html('<img style="border:1px solid gray;" src="' + + '" />').show();
}).mouseout( function(){
("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" >
<div >
<input name="f1" type="file" />
<img width="60" height="60">
</div>
<div ></div>
</form>
</body>
</html>