I have a file upload button that users click on the upload a function and when they choose the files they upload the site. This is working beautifully and perfectly.
However, I have come across a bug with the file name in ie.In Chrome and Firefox I am able to use the form data and grab the file name out of that. But in ie, it seems to be grabbing the entire path and using that as the name. Is there any other way to grab the file name from an uploaded file? So that this can be consistent and truly just be the file name?
My code looks like this.
var file = $(this).prop("files")[0]; var form = new FormData($('input[name^="media"]')); form.append("fileName", file.name); The ie name for the file
C:UsersUsersNameFolderNameMoreComplicatedFolderNameFileDocumentName.docx and in every other browser it grabs the file name as
FileDocumentName.docx 4 Answers
Answers 1
Try to pass the whole form. Something like this..
var myForm = document.getElementByTagName('form'); var form = new FormData(); form.append("myForm", myForm); Answers 2
This code segment works for both Chrome and IE
var path = document.getElementById("fileElement").value; var fileName = path.match(/[^\/\\]+$/).toString(); console.log(fileName); //What you need - filename only (without path) See https://stackoverflow.com/a/15893122/5746368 also. I've added .toString() to make it work in Chrome. Otherwise, it returns an object.
Answers 3
This should work for you as long as you are using IE 10 and above. I have tested this on IE-11 and Chrome
<html> <head> <title>Get Name of uploaded file</title> <script type="text/javascript"> function fetchFileName(fileObjId) { var fileObj = document.getElementById(fileObjId); var txt = ""; if ('files' in fileObj) { if (fileObj.files.length == 0) { txt = "Select one or more files."; } else { for(var i = 0; i < fileObj.files.length; i++) { txt += "<br><strong>" + (i+1) + ". file</strong><br>"; var file = fileObj.files[i]; if ('name' in file) { txt += "name: " + file.name + "<br>"; } if ('size' in file) { txt += "size: " + file.size + " bytes <br>"; } } } } else { if(fileObj.value == "") { txt += "Select one or more files."; } else { txt += "The files property is not supported by your browser!"; txt += "<br>The path of the selected file: " + fileObj.value; } } document.getElementById("demo").innerHTML = txt; return false; } </script> </head> <body> File to Upload: <input type="file" name="uploadFile" id="uploadFile" /> <input type="button" value="Get File Name" onclick="return fetchFileName('uploadFile')" /> <br/><br/> Output: <span id="demo"></span> </body> </html> See this too - https://www.w3schools.com/jsref/prop_fileupload_files.asp
Answers 4
In internet explorer, you get the full path instead of just the file name.
You can use this regex /[^\/\\]*$/ to match the desired output. Like:
var file = $(this).prop("files")[0]; var form = new FormData($('input[name^="media"]')); // Use the regex here to get the desired output var file_name = file.name.match(/[^\/\\]*$/)[0]; form.append("fileName", file_name); 
0 comments:
Post a Comment