Implementation principle: Create a binary object that temporarily points to an address via createobjecturl.
Procedure: Click to trigger the hidden input file's Click event, use Createobjecturl to read file, create a jquery picture object, URL equals binary object.
Front-End Code:
Js:
$ (function () {
$ (' [Type=file] '). Change (function (e) {
var file = E.target.files[0]
Preview (file, this);
})
});
Add a picture to trigger a hidden file input
function Uploadimage (obj) {
return $ (obj). Next (). Click ();
}
Preview file picture
function Preview (file, obj) {
Browser caches a picture
var img = new Image (), url = img.src = Url.createobjecturl (file);
var $img = $ (IMG);
Img.onload = function () {
Url.revokeobjecturl (URL)
var $parentBox = $ (obj). Parent (). Find (". Imgbox");
Alert (0);
$parentBox. HTML ("");
$parentBox. CSS ("width", "64");
$parentBox. CSS ("height", "64");
$parentBox. Append ($img)
$ (' #preview '). Empty (). Append ($img)
}
}
Html:
<td>
<div class= "upload-img" style= "float:left; margin-right:25px ">
<a href= "javascript:void (0);" onclick= "uploadimage (This)" class= "Upload-hotel-a" >
<div class= "Imgbox" >
</div>
</a>
<input type= "File" style= "Display:none"/>
<br/>
<a onclick= "deleteimg (This)" class= "button icon Trash deletetd" > Delete </a>
<input type= "hidden" value= "" >
</div>
</td>
Picture preview with Createobjecturl implementation