Multiple file inputs

Question

I'm new to all of this and still learning mostly on this site, its very usefull for me, and decided to get some help from you guys.

I styled my file input button and got the file name printed inside of text field. Now I would love to use those classes on multiple file inputs (together with text field which contains file name) on the same page. (I need more file inputs, not more files at once)

I know I can use ID's and just duplicate JS for every file field that I need, but I would like to do it in one function or make it more "dynamical" for mass usage.

So, I'm asking for a little help :)

HTML:

<div class="upload button left">
    <input class="upbtn" type="file" name="attachment" />Add attachment
</div>
<input class="filename" type="text" />

JS:

    $(".upbtn").change(function(e) {
        var datoteka = $(this).val();
        var lastIndex = datoteka.lastIndexOf("\\");
        if (lastIndex >= 0) {
            datoteka = datoteka.substring(lastIndex + 1);
        }
        $(".filename").val(datoteka);
    });

You can look at whole thing here: http://jsfiddle.net/k5cLt/5/

Thx in advance

Answer 1

This is possible. I used

   $(".upbtn").change(function(e) {
        var datoteka = $(this).val();
        var lastIndex = datoteka.lastIndexOf("\\");
        if (lastIndex >= 0) 
        {
            datoteka = datoteka.substring(lastIndex + 1);
        }
        var close = $(this).parent().next(".filename:first")
        close.val(datoteka);
   });

Here is the JSFiddle

The alignment of your inputs and such might not be as desired, but the JSFiddle shows the general idea of what I think you are trying to achieve.

Answer 2

Did you even try it with multiple file-fields ? What you did should work as is.

$(".upbtn").change(...);

gives back an array of jquery-wrapped objects with the class .upbtn and calls .change() on all of them..