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 window.URL.createObjectURL() 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:
The code copy is as follows:
<script type="text/javascript" src="jquery.js"></script>
<input id="upload" type="file">
<img id="preview" src="">
<script type="text/javascript">
$('#upload').change(function(){
// Get the first element of FileList
alert(document.getelementbyid('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:
The code copy 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 is suitable for chrome browser
If it is an IE browser, you can directly use the input value instead of src
When viewing 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.
The code copy is as follows:
function getFullPath(obj) { //Get the full path to 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 to get the client image
We will limit its size and format
The code copy is as follows:
$("#loadFile").change(function () {
var strSrc = $("#loadFile").val();
img = new Image();
img.src = getFullPath(strSrc);
//Verify that the upload file format is correct
var pos = strSrc.lastIndexOf(".");
var lastname = strSrc.substring(pos, strSrc.length)
if (lastname.toLowerCase() != ".jpg") {
alert("The file type you upload is "+ lastname + ", the image must be of JPG type");
return false;
}
//Verify the uploaded file's aspect ratio
if (img.height / img.width > 1.5 || img.height / img.width < 1.25) {
alert("The proportion of the image you upload is beyond the range, and the aspect ratio should be between 1.25-1.5");
return;
}
//Verify whether the uploaded file is oversized
if (img.fileSize / 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
The code copy is as follows:
$("#stuPic").attr("src", getFullPath(this));
Since jQuery is used, let’s share a code example written in jQuery:
The code copy 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('<img style="border:1px solid gray;" src="' + this.src + '" />').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" />
<img id="img1">
</div>
<div id="large"></div>
</form>
</body>
</html>