在文件名，JavaScript中添加前缀

Question

I would like to add a prefix to the filename of a file, before I send it to the server, I have an input field like this:

<input type="file" id="uploadControlId">

And if I do this:

var element = document.getElementById("uploadControlId");
console.log('file: ' + element);

I get the output:

file: [object HTMLInputElement]

I can read the filename by splitting the element, but since the element is a url, I have no idea how I can change the name.

splitting:

var element = document.getElementById("uploadControlId");
var elements = element.value.split("\\");
var fileName = parts[elements.length - 1];

Answer 1

You can not change the value of an file input, becase of security reasons. You can do your own AJAX script to post a file with other name, but not using the standard browser/form functionality. In your case there's a simple solution, just add an hidden field and pass the name trough this filed. Value of this filed can be set on submit.

<input id="uploadControlId" type="file" >
<input id="uploadFilename" type="hidden" value="">

there's a tag jquery, so I'll use jquery

$('#yourFormId').submit(function(){
   var filename = "prefix_" + $($("#uploadControlId").val().split("\\")).last();
   $('#uploadFilename').val(filename);
   return true;
});

or you can do something similar