admin管理员组文章数量:1302374
I'm programming a simple JavaScript page to get a file from the user and convert it to a data variable of either binary or text. When I use my code in a click event handler of a button, I get this error:
Uncaught TypeError: file.getAsText is not a function at HTMLButtonElement.sendfButton.onclick
First I browse and select a file, then click on send button.
This is my html input and button:
<tr>
<td>
<button type="button" class="control-button" id="send-file-button">SEND-FILE</button>
</td>
<td>
<input type='file' id='myfileinput' multiple><br>
<div id='output'>
</td>
</tr>
Here are my variables:
var sendfButton = document.getElementById("send-file-button");
var fileInput = document.getElementById("myfileinput");
And here is my click event handler:
sendfButton.onclick = function ()
{
var files = fileInput.files;
var accept = {
binary : ["image/png", "image/jpeg"],
text : ["text/plain", "text/css", "application/xml", "text/html" , "text/txt"]
};
var file;
if (conn && conn.open)
{
console.log('in1');
//convert a file to bytes then send it
for (var i = 0; i < files.length; i++)
{
console.log('in2');
file = files[i];
// if file type could be detected
if (file !== null)
{
console.log('in3');
if (accept.binary.indexOf(file.type) > -1)
{
console.log('in binary');
// file is a binary, which we accept
var data = file.getAsBinary();
console.log(data + 'dtat');
}
else if (accept.text.indexOf(file.type) > -1)
{
console.log('in text');
// file is of type text, which we accept
var data = file.getAsText();
console.log(data + 'dqata');
// modify data with string methods
}
}
}
console.log('out' + data);
conn.send(data);
console.log("fSent: " + data);
addMessage("<span class=\"selfMsg\">Self: </span> " + data);
}
else
{
console.log("failed fsend");
}
}
It seems to work when I run the code directly, but not when it is activated inside of the button event handler. Code 2 i add filereader but still there is a bug :
sendfButton.onclick = function ()
{
var files = fileInput.files;
var accept = {
binary : ["image/png", "image/jpeg"],
text : ["text/plain", "text/css", "application/xml", "text/html" , "text/txt"]
};
var file;
if (conn && conn.open)
{
console.log('in1');
//convert a file to bytes then send it
for (var i = 0; i < files.length; i++)
{
console.log('in2');
file = files[i];
var readers = new FileReader();
// if file type could be detected
if (file !== null)
{
console.log('in3');
if (accept.binary.indexOf(file.type) > -1)
{
console.log('in binary');
// file is a binary, which we accept
var data = readers.readAsBinaryString(file);
console.log(data + 'dtat');
}
else if (accept.text.indexOf(file.type) > -1)
{
console.log('in text');
// file is of type text, which we accept
var data = readers.readAsText(file);
console.log(data + 'dqata');
// modify data with string methods
}
}
}
console.log('out' + data);
conn.send(data);
console.log("fSent: " + data);
addMessage("<span class=\"selfMsg\">Self: </span> " + data);
}
else
{
console.log("failed fsend");
}
}
it returns undefined
I'm programming a simple JavaScript page to get a file from the user and convert it to a data variable of either binary or text. When I use my code in a click event handler of a button, I get this error:
Uncaught TypeError: file.getAsText is not a function at HTMLButtonElement.sendfButton.onclick
First I browse and select a file, then click on send button.
This is my html input and button:
<tr>
<td>
<button type="button" class="control-button" id="send-file-button">SEND-FILE</button>
</td>
<td>
<input type='file' id='myfileinput' multiple><br>
<div id='output'>
</td>
</tr>
Here are my variables:
var sendfButton = document.getElementById("send-file-button");
var fileInput = document.getElementById("myfileinput");
And here is my click event handler:
sendfButton.onclick = function ()
{
var files = fileInput.files;
var accept = {
binary : ["image/png", "image/jpeg"],
text : ["text/plain", "text/css", "application/xml", "text/html" , "text/txt"]
};
var file;
if (conn && conn.open)
{
console.log('in1');
//convert a file to bytes then send it
for (var i = 0; i < files.length; i++)
{
console.log('in2');
file = files[i];
// if file type could be detected
if (file !== null)
{
console.log('in3');
if (accept.binary.indexOf(file.type) > -1)
{
console.log('in binary');
// file is a binary, which we accept
var data = file.getAsBinary();
console.log(data + 'dtat');
}
else if (accept.text.indexOf(file.type) > -1)
{
console.log('in text');
// file is of type text, which we accept
var data = file.getAsText();
console.log(data + 'dqata');
// modify data with string methods
}
}
}
console.log('out' + data);
conn.send(data);
console.log("fSent: " + data);
addMessage("<span class=\"selfMsg\">Self: </span> " + data);
}
else
{
console.log("failed fsend");
}
}
It seems to work when I run the code directly, but not when it is activated inside of the button event handler. Code 2 i add filereader but still there is a bug :
sendfButton.onclick = function ()
{
var files = fileInput.files;
var accept = {
binary : ["image/png", "image/jpeg"],
text : ["text/plain", "text/css", "application/xml", "text/html" , "text/txt"]
};
var file;
if (conn && conn.open)
{
console.log('in1');
//convert a file to bytes then send it
for (var i = 0; i < files.length; i++)
{
console.log('in2');
file = files[i];
var readers = new FileReader();
// if file type could be detected
if (file !== null)
{
console.log('in3');
if (accept.binary.indexOf(file.type) > -1)
{
console.log('in binary');
// file is a binary, which we accept
var data = readers.readAsBinaryString(file);
console.log(data + 'dtat');
}
else if (accept.text.indexOf(file.type) > -1)
{
console.log('in text');
// file is of type text, which we accept
var data = readers.readAsText(file);
console.log(data + 'dqata');
// modify data with string methods
}
}
}
console.log('out' + data);
conn.send(data);
console.log("fSent: " + data);
addMessage("<span class=\"selfMsg\">Self: </span> " + data);
}
else
{
console.log("failed fsend");
}
}
it returns undefined
Share Improve this question edited Mar 4, 2020 at 19:17 Compo Start_up asked Mar 4, 2020 at 18:43 Compo Start_upCompo Start_up 611 gold badge1 silver badge7 bronze badges 3- 1 Please see the How to Ask page. Please include details like at least where the error is actually triggered. Otherwise we have to guess. – Dave Newton Commented Mar 4, 2020 at 18:48
-
fileis just a handle to a file, not an actual file. You need to use afileReaderto read the file thatfileis associated with. developer.mozilla/en-US/docs/Web/API/FileReader – JDunken Commented Mar 4, 2020 at 18:51 - i approved my code with adding filereader but there is a bug it returns undefined i edited my question so you can see my second code. – Compo Start_up Commented Mar 4, 2020 at 19:19
2 Answers
Reset to default 8The File.getAsText() method is obsolete. The File object is a specific kind of a Blob, so you can use the Blob.text() method instead. Replace file.getAsText() in your code with await file.text().
Edit: Another option that has better browser support is to use FileReader.readAsText(). Your code would look something like this:
var button = document.getElementById("send-file-button");
var fileInput = document.getElementById("myfileinput");
var output = document.getElementById("output");
button.onclick = function () {
var files = fileInput.files;
var reader = new FileReader();
reader.onload = function () {
output.innerText = reader.result;
};
if(files[0]) {
// This does not return the text. It just starts reading.
// The onload handler is triggered when it is done and the result is available.
reader.readAsText(files[0]);
}
};<input type='file' id='myfileinput' multiple>
<button type="button" class="control-button" id="send-file-button">SUBMIT-FILE</button>
<div id='output'>Alternative for a different string result, but here your can send it to your backend rest. file variable is from the File api.
var reader = new FileReader();
reader.onload = function () {
// send console result to your backend
console.log(reader.result.split(',')[1]);
};
if(file) {
reader.readAsDataURL(file);
}
本文标签： Converting File input to text in JavaScriptStack Overflow
版权声明：本文标题：Converting File input to text in JavaScript - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741643434a2390050.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论