浏览器默认标签路径为虚拟路径,获取真实路径需要使用File类的API实现

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


<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">
             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>

你可能感兴趣的:(前端,js,jquery)