7

How to get the contents of the directory from local PC in javascript/jQuery? For example from C:\Images

L84
  • 45,514
  • 58
  • 177
  • 257
Marcin Kostrzewa
  • 565
  • 4
  • 11
  • 24

8 Answers8

26

This only works in google chrome:

<input type="file" webkitdirectory>

This will prompt the user to select a directory and you can then access the files property of the input to see the contained files.

It is then possible to use the File System API to construct a virtual, sandboxed file system of the user selected files and have programmatic access to this virtual filesystem as if it was a real filesystem accessed by desktop app.

There is no way otherwise because that would be a big security issue

Working demo in google chrome: http://jsfiddle.net/JwgqC/

Esailija
  • 138,174
  • 23
  • 272
  • 326
  • Yeah, pretty useful for example a media player app to select music folder and then construct a playlist. – Esailija Nov 29 '12 at 11:31
  • 'virtual, sandboxes file system' ... I'm guessing there will be no refresh then? – Gordon Sun Apr 25 '18 at 22:07
  • Firefox now partially supports this: https://developer.mozilla.org/en-US/docs/Web/API/File_and_Directory_Entries_API/Firefox_support – Gaurav Mar 11 '19 at 19:56
2

here you can read local files by html5 and javascript using the file APIS

http://www.html5rocks.com/en/tutorials/file/dndfiles/

echo_Me
  • 37,078
  • 5
  • 58
  • 78
1

Javascript/Jquery does not have access to the local file system for security reasons. This is not possible.So try some server side base code.

4b0
  • 21,981
  • 30
  • 95
  • 142
1

Now, some years later, accessing to local files works fine in Chrome AND Firefox (52.8, but update Firefox is easy). It works also with IE 11.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>files</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<script>
// Check for the various File API support.
if (window.File && window.FileReader && window.FileList && window.Blob) {
  // Great success! All the File APIs are supported.
} else {
  alert('The File APIs are not fully supported in this browser.');
}
</script>
</body>
</html>
Plaute
  • 4,669
  • 2
  • 17
  • 19
0

You could write a script using a technology like php, ruby, java which will list all files and then send this information via ajax to Your browser.

But You can't do this only via javascript because of security restrictions.

czerasz
  • 13,682
  • 9
  • 53
  • 63
0

I don't think this is possible because accessing the local file system is a terrible security risk.

slowe
  • 336
  • 1
  • 5
0

Javascript can't access the users drive. That would be a big security issue, wouldn't it? :D

Instead, you need to use an other technology like flash or java-applets.

looper
  • 1,929
  • 23
  • 42
  • Flash cannot without prompts either, but if the java applet is signed (costs $499 for 1 year) and the user accepts it, the java applet can access local filesystem. – Esailija Nov 29 '12 at 11:26
0

it is not possible to have javascript-access to the local file-system from the browser, and this is good so!

hereandnow78
  • 14,094
  • 8
  • 42
  • 48