HTML5多文件上传：使用JavaScript设置文件名吗？

Question

An HTML form that allows uploading multiple files looks like this:

<form action="http://somehost.com/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="image" accept="image/*" multiple>
  <input type="submit">
</form>

The user can click the supplied input button and select multiple files to upload.

How can the filenames be set using JavaScript?

Why would you want to do this?

To allow drag'n'drop, for instance. So that when the user drops files from their system onto the form, it can automatically populate the file input field with those files.

Is there a better way?

Possibly with some html multipart mime send function?

Answer 1

The append() method of FormData accepts a third optional filename parameter. You could:

<input type="file" name="image" accept="image/*" id="fileinput" multiple>
<button onclick="upload()">Upload</button>

<script>
  this.upload = function() {
    var fileInput = document.getElementById('fileinput');
    for (var i = 0; i < fileInput.files.length; i++) {

      var file = fileInput.files[i];
      var xhr = new XMLHttpRequest();
      var fd = new FormData();

      xhr.open("POST", "http://somehost.com/upload", true);    

      fd.append("upload_file", file, 'YOUR_FILENAME_' + file.name);

      xhr.send(fd);

    }
  }

</script>

Answer 2

No , we can't set file names by JavaScript for obvious security reasons . JS simply is not allowed to do that. This should be done on server-side.

Files will have the names which they already have on the file system (on your local computer). You can, however, change them on server after uploading them.