這篇文章主要介紹了HTML5圖片預(yù)覽實例,需要的朋友可以參考下。
HTML5圖片預(yù)覽需要用到兩種方法
1.URL
2.FileReader
直接上代碼
代碼如下:
<!DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8">
<title>html5圖片上傳預(yù)覽</title>
<style>
#preview{
width:300px;
height:300px;
overflow:hidden;
}
#previewimg{
width:100%;
height:100%;
}
</style>
<scriptsrc="../jquery/jquery-1.8.3.js"></script>
<scripttype="text/javascript">
functionpreview1(file){
varimg=newImage(),url=img.src=URL.createObjectURL(file)
var$img=$(img)
img.onload=function(){
URL.revokeObjectURL(url)
$('#preview').empty().append($img)
}
}
functionpreview2(file){
varreader=newFileReader()
reader.onload=function(e){
var$img=$('<img>').attr("src",e.target.result)
$('#preview').empty().append($img)
}
reader.readAsDataURL(file)
}
$(function(){
$('[type=file]').change(function(e){
varfile=e.target.files[0]
preview1(file)
})
})
</script>
</head>
<body>
<formenctype="multipart/form-data"action=""method="post">
<inputtype="file"name="imageUpload"/>
<divid="preview"style="width:300px;height:300px;border:1pxsolidgray;"></div>
</form>
</body>
</html>
其中URL.revokeObjectURL方法Opera不支持，F(xiàn)ileReader除IE9及以下不支持，其它瀏覽器都支持。