Why can't I do ?

2019-01-01 16:02发布

站内文章 / JavaScript
40 0 0

问题:

It works if the html file is local (on my C drive), but not if the html file is on a server and the image file is local. Why is that?

Any possible workarounds?

回答1:

It would be a security vulnerability if the client could request local file system files and then use JavaScript to figure out what\'s in them.

The only way around this is to build an extension in a browser. Firefox extensions and IE extensions can access local resources. Chrome is much more restrictive.



回答2:

Browsers aren\'t allowed to access the local file system unless you\'re accessing a local html page. You have to upload the image somewhere. If it\'s in the same directory as the html file, then you can use <img src=\"localfile.jpg\"/>



回答3:

shouldn\'t you use \"file://C:/localfile.jpg\" instead of \"C:/localfile.jpg\"?



回答4:

C: is not a recognized URI scheme. Try file://c|/... instead.



回答5:

IE 9 : If you want that the user takes a look at image before he posts it to the server : The user should ADD the website to \"trusted Website list\".



回答6:

Honestly the easiest way was to add file hosting to the server.

  • Open IIS

  • Add a Virtual Directory under Default Web Site

    • virtual path will be what you want to browse to in the browser. So if you choose \"serverName/images you will be able to browse to it by going to http://serverName/images
    • Then add the physical path on the C: drive

  • Add the appropriate permissions to the folder on the C: drive for \"NETWORK SERVICE\" and \"IIS AppPool\\DefaultAppPool\"

  • Refresh Default Web Site

  • And you\'re done. You can now browse to any image in that folder by navigating to http://yourServerName/whateverYourFolderNameIs/yourImage.jpg and use that url in your img src

Hope this helps someone



回答7:

Newtang\'s observation about the security rules aside, how are you going to know that anyone who views your page will have the correct images at c:\\localfile.jpg? You can\'t. Even if you think you can, you can\'t. It presupposes a windows environment, for one thing.



回答8:

I see two possibilities for what you are trying to do:

  1. You want your webpage, running on a server, to find the file on the computer that you originally designed it?

  2. You want it to fetch it from the pc that is viewing at the page?

Option 1 just doesn\'t make sense :)

Option 2 would be a security hole, the browser prohibits a web page (served from the web) from loading content on the viewer\'s machine.

Kyle Hudson told you what you need to do, but that is so basic that I find it hard to believe this is all you want to do.



回答9:

if you use Google chrome browser you can use like this

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

But if you use Mozila Firefox the you need to add \"file \" ex.

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


回答10:

You need to upload the image aswell, then link to the image on the server.



回答11:

what about having the image be something selected by the user? Use a input:file tag and then after they select the image, show it on the clientside webpage? That is doable for most things. Right now i am trying to get it working for IE, but as with all microsoft products, it is a cluster fork().



回答12:

If you\'re deploying a local website just for yourself or certain clients, you can get around this by running mklink /D MyImages \"C:/MyImages\" in the website root directory as an admin in cmd. Then in the html, do <img src=\"MyImages/whatever.jpg\"> and the symbolic link established by mklink will connect the relative src link with the link on your C drive. It solved this issue for me, so it may help others who come to this question.

(Obviously this won\'t work for public websites since you can\'t run cmd commands on people\'s computers easily)



回答13:

we can use javascript\'s FileReader() and it\'s readAsDataURL(fileContent) function to show local drive/folder file. Bind change event to image then call javascript\'s showpreview function. Try this -

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


标签： javascript html filesystems src
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~