Does any one know how to make a file upload control in javascript. For example, one using a texbox and a button.
Dupe of Javascript file uploads
Plain HTML:
<input type="file" />
To programmatically create one using javascript:
var el = document.createElement('input');
el.type = 'file';
document.body.appendChild(el);
If my understanding is correct based on this and your previous topic, you're trying to upload a file PURELY in javascript. If this is the case, please note that this is not possible. You're going to need something on the server side to gain the request. Now, however, if you're looking for something that uploads in an "ajax" fashion, there are workarounds to do this by sending the request through a hidden iframe. I know JQuery has this capability built in.
If you need it to open a dialog (or if you need the ability to select multiple files) you need to use something like SWFUpload.
It is impossible to complete your task using pure javascript and using no fileinput html tags, as it is the only thing that allows you to select/upload files. You can only style it.
The other way, as suggested by soprano, is to use some Flash/Java based uploader.
Although the author of the question asked about form file input styling, I want to let you know that pure JavaScript, AJAX-style uploads are possible with FireFox 3 and greater.
I wrote an exhaustive tutorial about this new feature on my blog.
Related
Lets say, I have a simple HTML page with
<input id="input-file" type="file" />
this input field is NOT part of any form. User chooses a file from file system for this input.
How can I load contents of file chosen by user to a JavaScript variable (e.g. as a string or somehow compressed) when some BUTTON is pressed?
I can use only pure javascript or dojo/dojox.
If this is impossible or hard to do, the input can be part of a form. Nevertheless the goal still is to save the contents of a file to a javascript variable.
The solution should be well supported even by the browsers that are not the newest (2014).
You could use the File API which is getting support in some of the newer browsers. Read more about it on this SO-thread which deals with the same problem you are describing: https://stackoverflow.com/a/754398/844932.
EDIT:
According to this link, http://caniuse.com/#feat=filereader, the FileReader API is fairly well supported today (IE10+ and all other relevant browsers), so I think you'll probably be well off using it.
What I need to do is:
Let user choose txt file from his disc
Get the text from it to let's say a variable
Send it (the variable value) via AJAX
For the first point I want to know if I should use normal input type (like if I would like to send file via POST) <input type="file">
For the second point I need to know how to get the name of the file user selected and then read text from it. Also I'm not good with javascript so I don't really know how long can a string be there (file will have about 15k lines on average)
For the third I need nothing to know if I can have the data stored in a variable or an array.
Thanks in advance.
P.S. I guess javascript is not a fast language, but (depending on the editor) it sometimes opens on my computer the way that I have all the needed data in first 5 or 6 lines. Is it possible to read only first few lines from the file?
It is possible to get what you want using the File API as #dandavis and other commentors have mentioned (and linked), but there are some things to consider about that solution, namely browser support. Bottom line is the File API is currently a working draft of the w3c. And bottom line is even w3c recommended things aren't always fully supported by all browsers.
What solution is "best" for you really boils down to what browser/versions you want to support. If it were my own personal project or for a "modern" site/audience, I would use the File API. But if this is for something that requires maximum browser support (for older browsers), I would not currently recommend using the File API.
So having said all that, here is a suggested solution that does NOT involve using the FIle API.
supply an input type file in a form for the user to specify file. User will have to select the file (javascript cannot do this)
use form.submit() or set the target attribute to submit the form. There is an iframe trick for submitting a form without refreshing the page.
use server-side language of choice to respond with the file info (name, contents, etc.). For example in php you'd access the posted file with $_FILES
then you can use javascript to parse the response. Normally you'd send it as a json encoded response. Then you can do whatever you want with the file info in javascript.
With Chrome and Firefox you can read the contents of a text file like this:
HTML:
<input type="file" id="in-file" />
JavaScript with jQuery:
var fileInput = $('#in-file');
fileInput.change(function(e) {
var reader = new FileReader();
reader.onload = function(e) {
console.log(reader.result);
}
reader.readAsText(fileInput[0].files[0]);
});
IE doesn't support the FileReader object.
I am trying to write a program, or HTML page actually, with 3 inputs, Firstname, Lastname, and Date, and a OK button. It should look for the file with those three inputs as a file name (ie.: John_Smith_22AUG13.pdf) inside of an specific folder (ie. C:\Test\John_Smith_22AUG13.pdf) and if it exists copy the path to the clipboard so the user can then paste it in an email.
I was wondering if someone has done something similar in the past and has any advice or programming language I should use to do this.
Can this be done using javascript? If not what else could I use?
Anything helps! Thanks!
I could be mistaken, but as this is within a webpage I believe you can't get direct access to the file system of the users computer. This would open a number of security holes, and that would be bad. So from within a webapp, I don't believe that this is possible.
You can take a look at http://www.w3.org/TR/FileAPI/#dfn-filelist and try out the
<input type="file">
kind of way and handle the chosen file in a JS method. As brandon-gardiner already said, the access to the local filesystem is actually very limited due to security restrictions
If you meant a file stored on your local computer, you will have to create a program using languages like C, C++, or maybe even PHP if you create a local webserver. Accessing files on your computer just using a html or JavaScript is not possible.
As your question is not quite clear, maybe a file input is what you are looking for, like Jeroen answered. Then you can maybe use JavaScript to determine the path of the selected file... Although, as you said you were good in JavaScript, you probably already known that.
I know this question has asked before, but I'm still learning JavaScript, and I'm having trouble seeing through the complexity of other people's answers. I have a text file in the same directory as an HTML file that's reading JavaScript, and that text file literally has one line in it. I want to be able to grab that line out of the text file and put it in a string. What's a really simple way to do this that'll work in FF, IE, and Chrome, and is, aside from browser choice, is fairly universally valid? Again, I know this has been asked before, but I'm having trouble picking the real method here out of the complexity of example code I've seen elsewhere. Thanks!
Use jQuery get method http://api.jquery.com/jQuery.get/
$.get(url).success(function(data, status, response) {
var text = response.responseText;
// use your one line text stored in text variable here
}
The url variable can be relative, so you could put the text filename there. For example if your text file is called "mytext.txt" and in the same directory of the script accessing it you put:
$.get("mytext.txt").success(function(data, status, response) {
var text = response.responseText;
// use your one line text stored in text variable here
}
Note this answer assumes you are using http to access the text file and both script and text file is in the same domain.
This is tricky because most browsers by default do not permit JS to open files locally from the computer's file system. You can request the text file from a web server using ajax though. To do this I would recommend jQuery as it will be very "universally valid" as you put it. When doing ajax calls, the request must adhere to the same origin policy. In laymans terms, if you are at www.mysite.com you can request www.mysite.com/aTextFile.txt but you would not be able to request www.someothersite.com/aTextFile.txt
To do this with jquery, see momo's answer. I was going to type the same thing but he/she beat me to it.
The simplest way I can think of is to use a server-sided language to output the contents of the document into the page somewhere (such as an invisible textarea), and just have Javascript read that. No AJAX, no libraries, and it's really fast.
<textarea id="textarea"><?php include("test.txt") ?></textarea>
<script>
var str = document.getElementById("textarea").value;
</script>
Now, this isn't always the best way, but compared to using asynchronous Javascript everywhere with heavy frameworks at the expense of SEO performance...
I need to get an image url using FileUpload Control. When i do it in the explorer it shows all files to select. But i need to show only ".jpg,.gif" files. How can i do it.
As long as I remember file upload control does not allow you to restrict files for specific extensions. All you can do is validate , have a look at this article Adding Filter Action to FileUpload Control of ASP.NET 2.0
In standard html, i am not sure if this can be done (especially for all browsers) see this answer
I have done this using a flash uploader, eg uploadify
This is not possible because the underlying < input type='file' / > html element does not support that. In order to have such filtering you ought to use Flash/Silverlight uploader, like the Telerik RadAsyncUpload.