Home > Developer > Web Develop
Two ways of achieving
<! DOCTYPE html>
<meta charset= "Utf-8" >
<TITLE>HTML5 Image upload Preview </title>
<style>
#preview {
width:300px;
height:300px;
Overflow:hidden;
}
#preview img {
width:100%;
height:100%;
}
</style>
<script src= ". /jquery/jquery-1.8.3.js "></script>
<script type= "Text/javascript" >
function Preview1 (file) {
var img = new Image (), url = img.src = Url.createobjecturl (file)
var $img = $ (IMG)
Img.onload = function () {
Url.revokeobjecturl (URL)
$ (' #preview '). Empty (). Append ($img)
}
}
function Preview2 (file) {
var reader = new FileReader ()
Reader.onload = function (e) {
var $img = $ (' '). attr ("src", E.target.result)
$ (' #preview '). Empty (). Append ($img)
}
Reader.readasdataurl (file)
}
$ (function () {
$ (' [Type=file] '). Change (function (e) {
var file = E.target.files[0]
Preview1 (file)
})
})
</script>
<body>
<form enctype= "Multipart/form-data" action= "" method= "POST" >
<input type= "File" name= "Imageupload"/>
<div id= "Preview" style= "width:300px;height:300px;border:1px solid gray;" ></div>
</form>
</body>
Url.revokeobjecturl Method Opera does not support, FileReader except IE9 and below does not support, other browsers are supported.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
