javascript - POST immediately after select a file

Question

I have the following HTML code

<form action="/script/upload_key.py" method="POST" enctype="multipart/form-data"> 
    Key filename: <input name="file_1" type="file"> 
    <input name="submit" type="submit"> 
</form> 

which gives me the following stuff.

I was wondering

1. How I can use JavaScript, to eliminate the need of Submit button. That's mean, once I Choose File, the selected file will be uploaded immediately?
2. How can I make sure the field to display selected file name is long enough, so that ... will not be shown?

Answer 1

To submit it immediately, just do this:

<input name="file_1" type="file" onchange="this.form.submit();">

If you are using JQuery:

$("input[name='file_1']").change(function() { this.form.submit(); });

About your other questions:

1) There are many methods out there... for example:

http://valums.com/ajax-upload/

http://www.webtoolkit.info/ajax-file-upload.html

(and many more. Just google for: "Ajax file upload" or "iframe file upload")

2) Don't worry about the width of the field. As you don't know how long can it be the path, it would never be long enough (i think). Also browsers may display it very different. For example Safari or Chrome show it very different from Firefox or IE. Just use the default length or the one that looks better with your design.