Geek asks and answers

Is it possible to remove input type = file selection using JavaScript?

If you have an HTML form with this element:

<input type="file" name="file" multiple="multiple">

Then usually this allows the user to select several files for downloading, and all of them are sent to the server with the same name of the file form field.

I understand that due to security reasons, browsers will not allow JavaScript to simply set any value for the selected files, which is good.

I'm just curious, though, as soon as the user selects the files, I would like several forms to download separately. Is there any way:

  • Clone input element into each new form and programmatically remove file selection from each element?
  • Transfer some of them to a separate type of input = file element or even another form on the screen?
+3
1

input[type=file], . .

. , , , . (: , , . . .)

, , , . , , , , . , , , .

, Chrome, Firefox IE10 : Live Example |

HTML:

<input id="theFile" type="file">
<br>Choose a file above, then either:
<br><input type="button" id="btnClone" value="Clone">
<input type="button" id="btnMove" value="Move to iframe">
<br>
<iframe id="theFrame" style="width: 99%"></iframe>

JavaScript:

(function() {
  gid("btnClone").onclick = function() {
    display("Here the clone:");
    document.body.appendChild(gid("theFile").cloneNode(true));
  };
  gid("btnMove").onclick = function() {
    gid("theFrame").contentDocument.body.appendChild(gid("theFile"));
    display("File input moved to the iframe");
  };

  function gid(id) {
    return document.getElementById(id);
  }

  function display(msg) {
    var p = document.createElement('p');
    p.innerHTML = String(msg);
    document.body.appendChild(p);
  }
})();

, - " iframe", , , . ( , .)

+2

More articles:


All Articles