HTML 页面中的目录选择器

Question

How can I create a directory chooser in html page.
If I use input file element I can select file only, but I need to select directory instead.
I need to do this beacause the user should select a right path inside his computer.
Any solutions?

Answer 1

Try this, I think it will work for you:

<input type="file" webkitdirectory directory multiple/>

You can find the demo of this at https://plus.google.com/+AddyOsmani/posts/Dk5UhZ6zfF3 , and if you need further information you can find it here .

Answer 2

Can't be done in pure HTML/JavaScript for security reasons.

Selecting a file for upload is the best you can do, and even then you won't get its full original path in modern browsers.

You may be able to put something together using Java or Flash (eg using SWFUpload as a basis), but it's a lot of work and brings additional compatibility issues.

Another thought would be opening an iframe showing the user's C: drive (or whatever) but even if that's possible nowadays (could be blocked for security reasons, haven't tried in a long time) it will be impossible for your web site to communicate with the iframe (again for security reasons).

What do you need this for?

Answer 3

In case if you are the server and the user (eg you are creating an app which works via browser and you need to choose a folder) then try to call JFileChooser from the server when some button is clicked in the browser

JFileChooser chooser = new JFileChooser();
chooser.setCurrentDirectory(new java.io.File("."));
chooser.setDialogTitle("select folder");
chooser.setFileSelectionMode(JFileChooser.DIRECTORIES_ONLY);
chooser.setAcceptAllFileFilterUsed(false);

This code snipped is from here

Answer 4

Scripting is inevitable.

This isn't provided because of the security risk. <input type='file' /> is closest, but not what you are looking for.

Checkout this example that uses Javascript to achieve what you want.

If the OS is windows, you can use VB scripts to access the core control files to browse for a folder.

Answer 5

I did a work around. I had a hidden textbox to hold the value. Then, on form_onsubmit, I copied the path value, less the file name to the hidden folder. Then, set the fileInput box to "". That way, no file is uploaded. I don't recall the event of the fileUpload control. Maybe onchange. It's been a while. If there's a value, I parse off the file name and put the folder back to the box. Of, course you'd validate that the file as a valid file. This would give you the clients workstation folder.
However, if you want to reflect server paths, that requires a whole different coding approach.

Answer 6

This is my solution. It is the same as the above answers but you should notice that webkitdirectory = "true" .

<input id="design" type="file" webkitdirectory = "true" directory/>

Answer 7

As of 2022 there is now a directory picker API:

https://developer.mozilla.org/en-US/docs/Web/API/Window/showDirectoryPicker

async function getDir() {
  const dirHandle = await window.showDirectoryPicker();

  // run code for dirHandle
}

Answer 8

If you do not have too many folders then I suggest you use if statements to choose an upload folder depending on the user input details. Eg

String user= request.getParameter("username");
if (user=="Alfred"){
//Path A;
}
if (user=="other"){
//Path B;
}