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

最新推荐文章于 2024-07-24 14:03:49 发布

LFF1991

最新推荐文章于 2024-07-24 14:03:49 发布

阅读量1.1w

点赞数 2

分类专栏：前端 jquery js

本文链接：https://blog.csdn.net/LFF1991/article/details/79207025

版权

前端同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

jquery

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

居于安全考虑现代的浏览器无法获取到这样的真实的路径，而得到的是：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>