为什么我不能<img rel="nofollow noreferrer" src ="C:/localfile.jpg">？

Question

为什么我不能<img rel="nofollow noreferrer" src ="C:/localfile.jpg">？

Pet*_*erV 83 html javascript filesystems src

如果html文件是本地的(在我的C驱动器上),它可以工作,但如果html文件在服务器上并且图像文件是本地的,则不行.这是为什么？

任何可能的解决方法？

Answer 1

Bjo*_*orn 55

如果客户端可以请求本地文件系统文件然后使用JavaScript来确定其中的内容,那么这将是一个安全漏洞.

解决此问题的唯一方法是在浏览器中构建扩展.Firefox扩展和IE扩展可以访问本地资源.Chrome限制性更强.

尽管如此，Flash 仍然可以访问用户选择的任何内容，即使是在 Chrome 中 (2认同)
这种偏执的安全感只是一种干扰。您可以使用 AJAX 从带有 <input type=file> 字段的表单将用户文件上传到服务器，但是如果您想对用户友好并显示预览，则必须进行往返并将文件上传到服务器第一。它比本地生成预览图像更安全吗？ (2认同)
为了向用户展示一个不错的预览，您必须先到服务器进行一次往返旅行。使用 AJAX 是可能的。首先将文件上传到服务器如何比在本地生成预览图像更安全？偏执的安全只会制造干扰，但不能解决任何问题。 (2认同)

Answer 2

And*_*rao 29

你不应该使用"file:// C:/localfile.jpg"而不是"C:/localfile.jpg"吗？

谢谢.7年.Net开发人员,我忘了把文件://放在前面...... (6认同)
`file:///localfile.jpg` 对于 Linux 来说是正确的 (2认同)

Answer 3

New*_*ang 25

除非您正在访问本地html页面,否则不允许浏览器访问本地文件系统.你必须在某处上传图像.如果它与html文件位于同一目录中,那么您可以使用<img src="localfile.jpg"/>

Answer 4

Ign*_*ams 16

C:不是公认的URI方案.试试吧file://c|/....

Answer 5

for*_*aro 5

老实说，最简单的方法是将文件托管添加到服务器。

打开IIS
在默认网站下添加虚拟目录
- 虚拟路径将是您要在浏览器中浏览的内容。因此，如果您选择“ serverName / images”，则可以转到http：// serverName / images来浏览到它。
- 然后在C：驱动器上添加物理路径
将适当的权限添加到“网络服务”和“ IIS AppPool \ DefaultAppPool”的C：驱动器上的文件夹中
刷新默认网站
这样就完成了。现在，您可以通过导航到http：//yourServerName/whateverYourFolderNameIs/yourImage.jpg浏览到该文件夹中的任何图像，并在img src中使用该URL。

希望这可以帮助某人

Answer 6

Rav*_*agi 5

我们可以使用 JavaScriptFileReader()及其 `readAsDataURL（fileContent 函数）来显示本地驱动器/文件夹文件。将更改事件绑定到图像，然后调用 JavaScript 的 showpreview 函数。

<!doctype html>
<html>

<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;'>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
    <title></title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    <script type="text/javascript">
    function showpreview(e) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $("#previewImage").attr("src", e.target.result);
        }
        //Imagepath.files[0] is blob type
        reader.readAsDataURL(e.files[0]);
    }
    </script>
</head>
<body >
    <div>
    <input type="file" name="fileupload" value="fileupload" id="fileupload" onchange='showpreview(this)'>
    </div>
    <div>
        &nbsp;
    </div>
    <div>
    <img width="50%" id="previewImage">
    </div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	15 年，1 月前
查看次数：	276596 次
最近记录：	7 年，5 月前