您的位置：首页 > 其它

浏览器默认<input type="file"/>标签路径为虚拟路径，获取真实路径需要使用File类的API实现

2018-01-30 15:51 826 查看

居于安全考虑现代的浏览器无法获取到这样的真实的路径，而得到的是：C://fakepath/文件名这样的结果，而如果我们要实现图片预览效果就需要绝对路径，那么可以使用以下方式实现图片的预览效果

<script type="text/javascript">
var image = '';
function selectImage(file){
if(!file.files||!file.files[0]){
return;
}
var reader = new FileReader();
reader.onload = function(evt){
document.getElementById('previewImg').src = evt.target.result;
image = evt.target.result;
}
reader.readAsDataURL(file.files[0]);
}
</script>

完整的html实例如下:

<!DOCTYPE HTM>
<html>
<head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<title>上传图片预览案例</title>
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<!--<script type="text/javascript" src="js/project/pictrue.js"></script> -->
<!-- <script type="text/javascript" src="js/project/page.js"></script> -->
<script type="text/javascript">
var image = '';
function selectImage(file){
if(!file.files||!file.files[0]){
return;
}
var reader = new FileReader();
reader.onload = function(evt){
document.getElementById('previewImg').src = evt.target.result;
image = evt.target.result;
}
reader.readAsDataURL(file.files[0]);
}
</script>
</head>
<body>
<img id="previewImg" src="image/preview.jpg" width="80" height="80" />
<form action="uploadServlet.do" method="post"
enctype="multipart/form-data">
请选择图片：<input id="myfile" name="myfile" type="file"
onchange="selectImage(this)" />
</form>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航