How to realize Picture Preview with HTML5
This article mainly introduces HTML5 how to achieve picture preview, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.
HTML5 picture preview needs to use two methods
1.URL
2.FileReader
Go directly to the code
Html5 picture upload preview
# preview {
Width: 300px
Height: 300px
Overflow: hidden
}
# preview img {
Width: 100%
Height: 100%
}
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)
})
})
The URL.revokeObjectURL method Opera is not supported, and FileReader is supported by all browsers except IE9 and below.
Thank you for reading this article carefully. I hope the article "how to achieve Picture Preview in HTML5" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!
