Shulou(Shulou.com)06/03 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.