Question

我是HTML5和javascript的新手，我有一个问题。

我有以下HTML代码

<img id='image_preview'/>";
<input type='file' name='fileUpl' id='fileUpl' onchange='doUpl();' accept='image/*'/>

简而言之，有一个按钮，每次单击它时，都会执行doUpl（）。它会加载图片并将图片预览显示为<img ... >

js功能是

function doUpl() {
        var file = document.getElementById('fileUpl').files[0];
         ...
        dataUrl = canvas.toDataURL("image/jpeg");
        document.getElementById('image_preview').src = dataUrl;  
        ...

我希望输入字段预先加载默认图片路径（例如c：\ test.jpg），并且第一次加载页面时已经显示了test.jpg的预览。如果按下按钮，则图片会更新。

目前，当我第一次加载html页面时，没有预览，输入路径为空。

任何人都可以帮我吗？

谢谢：）

编辑：抱歉混淆。测试img当然是在服务器上，而不是在客户端PC上。

Answer 1

您可以检查输入上是否有内容并伪造img并伪造路径但是您无法从用户硬盘获取真实图像，因为它的安全性

Answer 2

我想让输入字段预先加载默认图片路径（例如c：\ test.jpg）

您可以使用value属性执行此操作。像这样：

<input type='file' name='fileUpl' id='fileUpl' onchange='doUpl();' accept='image/*' value='c:\test.jpg'/>

第一次加载页面时已经显示test.jpg的预览。

有几种方法可以做到这一点。基本的一个是使用src属性：

，如上所述

<img id='image_preview' src='c:\test.jpg'/>"

但是，我认为最好使用javascript，因为如果有一天你需要更改这个标准图片，你只能在input元素上更改它。

 </body>
    <script>
    // self executing function here
    (function() {
       doUpl(); //this will execute when page is loaded.        
    })();
    </script>

P.S。只有在服务器上<{1>}

时，才能执行此操作

Answer 3

如果您正在谈论从客户端的文件系统预加载图像，我担心由于明显的安全原因，这是不可能的：

File API的规范说明：

（..）此规范还假定主要用户交互是使用HTML表单[HTML]的元素，以及首先是FileReader对象正在读取的所有文件由用户选择（..）

<img/>内容：默认值

3 个答案: