JS+HTML5实现图片在线预览功能
程序员文章站
2023-09-06 18:52:23
本文实例为大家分享了html5图片在线预览的具体代码，供大家参考，具体内容如下
<...
本文实例为大家分享了html5图片在线预览的具体代码，供大家参考，具体内容如下
<!doctype html>
<html>
<head>
<title>html5图片预览</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script src="http://img9.tongzhuo100.com/js/jquery-1.7.2.min.js"></script>
<style>
.hide
{
display:none;
}
</style>
</head>
<body>
<h3>请选择一张jpg/gif的图片</h3>
<form name="form0" id="form0" >
<input type="file" name="file0" id="file0" multiple="multiple" />
<br><br><img src="" id="img0" width="120" class="hide">
</form>
<script>
$("#file0").change(function(){
var objurl = getobjecturl(this.files[0]) ;
console.log("objurl = "+objurl) ;
if (objurl)
{
$("#img0").attr("src", objurl);
$("#img0").removeclass("hide");
}
}) ;
function getobjecturl(file)
{
var url = null ;
if (window.createobjecturl!=undefined)
{ // basic
url = window.createobjecturl(file) ;
}
else if (window.url!=undefined)
{
// mozilla(firefox)
url = window.url.createobjecturl(file) ;
}
else if (window.webkiturl!=undefined) {
// webkit or chrome
url = window.webkiturl.createobjecturl(file) ;
}
return url ;
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。