115

如果 html 文件是本地的（在我的 C 驱动器上），它可以工作，但如果 html 文件在服务器上并且图像文件是本地的，则不能。这是为什么？

任何可能的解决方法？

4

15 回答 15

72

如果客户端可以请求本地文件系统文件，然后使用 JavaScript 找出其中的内容，这将是一个安全漏洞。

解决这个问题的唯一方法是在浏览器中构建一个扩展。Firefox 扩展和 IE 扩展可以访问本地资源。Chrome 的限制要大得多。

于 2010-11-03T19:14:09.217 回答
34

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

于 2010-11-03T19:13:46.733 回答
30

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

于 2010-11-03T19:13:28.507 回答
20

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

于 2010-11-03T19:13:01.980 回答
7

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

  • 打开 IIS

  • 在默认网站下添加虚拟目录

    • 虚拟路径将是您要在浏览器中浏览的内容。因此，如果您选择“ serverName/images，您将能够通过访问http://serverName/images来浏览它
    • 然后在C:盘上添加物理路径

  • 在 C: 驱动器上为“NETWORK SERVICE”和“IIS AppPool\DefaultAppPool”的文件夹添加适当的权限

  • 刷新默认网站

  • 你完成了。您现在可以通过导航到http://yourServerName/whateverYourFolderNameIs/yourImage.jpg并在您的 img src 中使用该 url来浏览该文件夹中的任何图像

希望这可以帮助某人

于 2016-10-05T15:12:48.157 回答
3

IE 9：如果您希望用户在将图像发布到服务器之前查看图像：用户应将网站添加到“受信任的网站列表”。

于 2012-09-27T14:02:53.717 回答
3

我们可以使用 javascript 的FileReader()和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>
于 2018-04-02T11:39:39.843 回答
2

撇开 Newtang 对安全规则的观察，您怎么知道查看您页面的任何人都将获得正确的图像c:\localfile.jpg？你不能。即使你认为你可以，你也不能。一方面，它以 Windows 环境为前提。

于 2010-11-03T19:14:25.750 回答
2

如果您使用 Google chrome 浏览器，您可以像这样使用

<img src="E://bulbpro/pic_bulboff.gif"   width="150px" height="200px">

但如果您使用 Mozilla Firefox，则需要添加“文件”前。

<img src="file:E://bulbpro/pic_bulboff.gif"   width="150px" height="200px">
于 2015-12-08T12:45:11.717 回答
1

我看到您尝试做的事情有两种可能性：

  1. 您希望在服务器上运行的网页在您最初设计的计算机上找到文件吗？

  2. 您希望它从正在查看页面的电脑上获取它吗？

选项1没有意义:)

选项 2 将是一个安全漏洞，浏览器禁止网页（从网络提供）在查看者的机器上加载内容。

凯尔哈德森告诉你你需要做什么，但这太基本了，我很难相信这就是你想做的一切。

于 2010-11-03T19:48:19.380 回答
1

如果您只是为自己或某些客户部署本地网站，您可以通过mklink /D MyImages "C:/MyImages"在 cmd 中以管理员身份在网站根目录中运行来解决此问题。然后在 html 中，do<img src="MyImages/whatever.jpg">和 mklink 建立的符号链接会将相对的 src 链接与你 C 盘上的链接连接起来。它为我解决了这个问题，因此它可能会帮助其他提出这个问题的人。

（显然这不适用于公共网站，因为您不能轻松地在人们的计算机上运行 cmd 命令）

于 2018-02-02T20:28:25.913 回答
1

我尝试了很多技术，终于在C#端和JS端找到了一个。您不能提供 src 属性的物理路径，但可以将 base64 字符串作为 src 提供给 Img 标记。让我们看看下面的 C# 代码示例。

<asp:Image ID="imgEvid" src="#" runat="server" Height="99px"/>

C# 代码

 if (File.Exists(filepath)
                            {
                                byte[] imageArray = System.IO.File.ReadAllBytes(filepath);
                                string base64ImageRepresentation = Convert.ToBase64String(imageArray);
                                var val = $"data: image/png; base64,{base64ImageRepresentation}";
                                imgEvid.Attributes.Add("src", val);
                            }

希望这会有所帮助

于 2020-07-16T10:16:32.243 回答
1

开始file:///和结束filename应该工作：

<img src="file:///C:/Users/91860/Desktop/snow.jpg" alt="Snow" style="width:100%;">
于 2020-08-10T11:09:09.790 回答
0

您还需要上传图片，然后链接到服务器上的图片。

于 2010-11-03T19:15:03.190 回答
0

让图像成为用户选择的东西怎么样？使用 input:file 标签，然后在他们选择图像后，将其显示在客户端网页上？这对大多数事情都是可行的。现在我正试图让它适用于 IE，但与所有微软产品一样，它是一个集群 fork()。

于 2012-06-25T15:43:32.483 回答