Cheok Yan Cheng Cheok Yan Cheng - 3 months ago 7x
HTML Question

POST immediately after select a file

I have the following HTML code

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

which gives me the following stuff.

alt text

I was wondering

  1. How I can use JavaScript, to eliminate the need of
    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?


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:

(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.