Jump to content

jQuery Mobile read a text file


manieverster

Recommended Posts

Hallo all,

 

I have a problem that I hope someone can help me with. I am using the Intel XDK with jQuery and Cordova. I do not unfortunately know which versions they are because I can't see it but the XDK has just update so I believe it is the newest versions whatever they are. I added a html file that I am working with at the moment to read a text file and eventually save to a database but for now to get it working I just want to place the contents in a div. I am using an input type="file" as below to select the file from the directory.

<input class="wide-control" placeholder="Text File" type="file"  name="txtFile" id="txtFile">

My code is in the index.html file (attached) and the input and div is in the other html file. My problem is lying where I get the file. I have put alerts before and after and I also have two versions of reading the file. the readText function is doing the jQuery.get or at the moment $.get and just absolutely nothing happens. The readFile function gives me an error: Uncaught TypeError: Cannot read property '0' of undefined index.html line 143.


var Importer = {
init: function() {
var me = this
$("#btnImport").bind("tap", function(e) {
//me.readText()
me.readFile()
});
},
readText: function() {
if (window.File && window.FileReader && window.FileList && window.Blob) {
var myfile = $("#txtFile").val()
var isAbs = $.mobile.path.isAbsoluteUrl(myfile);
alert("Abs URL: " +isAbs);
alert(myfile);
$.get(myfile.file[0], function(data) {
alert("$.get")
//var myvar = data;
//var myline = data.replace(/n/g,"<br />")
//alert(myline);
//$('#filecontents').html(data.replace(/n/g,'<br />'));
});
}
else {
alert("Files are not supported");
};
}, // readtext
readFile: function() {
if (window.File && window.FileReader && window.FileList && window.Blob) {
var fileSelected = $('#txtFile').val();
alert(fileSelected);
var fileExtension = /text.*/;
alert(fileExtension);
var fileTobeRead = fileSelected.files[0];
if (fileTobeRead.type.match(fileExtension)) {
var fileReader = new FileReader();
fileReader.onload = function (e) {
var fileContents = $('#filecontents');
fileContents.innerText = fileReader.result;
}
fileReader.readAsText(fileTobeRead);
}
else {
alert("Please select text file");
}
}
else {
alert("Files are not supported");
};
} // readfile
} //importer

index.html

Link to comment
Share on other sites

Trying to use ajax to read the file isn't going to work, the file isn't on a web server. In your second piece of code you're getting the error because you're trying to access a property called files on a string, the value of the field. The files property is on the field itself, not the value. There's a description about how to use files with Javascript here:https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...