JS预览图像将本地图片显示到浏览器上_Javascript教程-查字典教程网
JS预览图像将本地图片显示到浏览器上
JS预览图像将本地图片显示到浏览器上
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:/***从file域获取本地图片url*/functiongetFileUrl(sourceId){varurl;if(n...

复制代码 代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">

/**

* 从 file 域获取 本地图片 url

*/

function getFileUrl(sourceId) {

var url;

if (navigator.userAgent.indexOf("MSIE")>=1) { // IE

url = document.getElementById(sourceId).value;

} else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox

url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));

} else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome

url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));

}

return url;

}

/**

* 将本地图片 显示到浏览器上

*/

function preImg(sourceId, targetId) {

var url = getFileUrl(sourceId);

var imgPre = document.getElementById(targetId);

imgPre.src = url;

}

</script>

</head>

<body>

<form action="">

<input type="file" name="imgOne" id="imgOne" onchange="preImg(this.id,'imgPre');" />

<img id="imgPre" src="" width="300px" height="300px" />

</form>

</body>

</html>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类