Beispiel für eine HTML5-Bildvorschau, Sharing_html5-Tutorial-Fähigkeiten

HTML5-Bildvorschau erfordert zwei Methoden

1.URL
2.FileReader
Laden Sie den Code direkt hoch

Code kopieren

Der Code lautet wie folgt:

#preview {
width: 300px;
height: 300px;
overflow: versteckt;
}
#preview img {
width: 100%;
Höhe: 100 %;
}


< ;script type="text/javascript">
Funktionsvorschau1(Datei) {
var img = new Image(), url = img.src = URL.createObjectURL(file)
var $img = $( img)
img.onload = function() {
URL.revokeObjectURL(url)
$('#preview').empty().append($img)
}
}
Funktion Vorschau2(Datei) {
var Reader = new FileReader()
Reader.onload = Funktion(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]
Vorschau1 (Datei)
})
})

Die URL.revokeObjectURL-Methode Opera unterstützt sie nicht, außer IE9 und niedriger, aber andere Browser unterstützen sie.