Comments: This article mainly introduces HTML5 image preview instances. For more information, see
Two methods are required for HTML5 image preview.
1. URL
2. FileReader
Directly Add code
The Code is as follows:
<! Doctype html>
<Html>
<Head>
<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.tar get. result)
$ ('# Preview'). empty (). append ($ img)
}
Reader. readAsDataURL (file)
}
$ (Function (){
$ ('[Type = file]'). change (function (e ){
Var file = e.tar get. files [0]
Preview1 (file)
})
})
</Script>
</Head>
<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>
</Html>
The URL. revokeObjectURL method Opera is not supported, and FileReader is not supported except IE9 and below, and is supported by other browsers.
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
