JQuery ajax file upload to ASP.NET with input file

Question

I am trying to implement file upload functionality with ASP.NET and jQuery. I use input file control and have 7 of them in my page. The page is an ASPX page with master page. Here is my code;

ASPX:

<div class="form-group">
    <asp:Label runat="server" AssociatedControlID="file1" CssClass="col-md-3 control-label">File 1</asp:Label>
    <div class="col-md-9">
        <input type="file" id="file1"  runat="server" class="filestyle" data-icon="false" data-buttonbefore="true" data-buttontext="Dosya Seç" data-placeholder="Dosya Seçilmedi">
    </div>

</div> 

<div class="form-group">
    <asp:Label runat="server" AssociatedControlID="file2" CssClass="col-md-3 control-label">File 2</asp:Label>
    <div class="col-md-9">
        <input type="file" id="file2"  runat="server" class="filestyle" data-icon="false" data-buttonbefore="true" data-buttontext="Dosya Seç" data-placeholder="Dosya Seçilmedi">
    </div>

</div>

JavaScript:

$(document).ready(function () {
    $("#btnUpload").click(function (event) {
        var file1 = $("#<%=file1.ClientID %>").files[0];
        var file2 = $("#<%=file2.ClientID %>").files[0];

        var files = [file1, file2];

        if (files.length > 0) {
            var formData = new FormData();
            for (var i = 0; i < files.length; i++) {
                formData.append(files[i].name, files[i]);
            }

            var progressbarLabel = $('#progressBar-label');
            var progressbarDiv = $('#progressbar');

            $.ajax({
                url: '../Util/UploadHandler.ashx',
                method: 'post',
                data: formData,
                contentType: false,
                processData: false,
                success: function () {
                    progressbarLabel.text('Complete');
                    progressbarDiv.fadeOut(2000);
                },
                error: function (err) {
                    alert(err.statusText);
                }
            });

            progressbarLabel.text('Uploading...');
            progressbarDiv.progressbar({
                value: false
            }).fadeIn(500);
        }
    });
});

I got error when I press upload button stating that file1 is undefined.

I also tried

var file1 = $("#file1").files[0];

and file1 is undefined again.

How can I get file1 in JavaScript code?

What do you get if you use "document.getElementById('file1').files[0]"? — An0nC0d3r
– An0nC0d3r, Commented Oct 22, 2015 at 20:42

gre_gor · Accepted Answer · 2015-10-22 21:26:03Z

1

You need to access files from the DOM object and not from the jQuery object.

var file1 = $("#<%=file1.ClientID %>").get(0).files[0];
var file2 = $("#<%=file2.ClientID %>").get(0).files[0];

You should probably also check, if files actually has files and is not empty.

answered Oct 22, 2015 at 21:26

gre_gor

6,65812 gold badges104 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

BoundForGlory · Accepted Answer · 2015-10-22 20:46:10Z

0

ASP.NET will append a bunch of characters to the end of your id if you have the runat=server attribute. Drop that if you are not accessing the the DOM element directly in your server side code (something you should never do anyway).

answered Oct 22, 2015 at 20:46

BoundForGlory

4,44715 gold badges59 silver badges83 bronze badges

Comments

An0nC0d3r · Accepted Answer · 2015-10-22 21:08:59Z

Try adding multiple to your input elements...

<div class="form-group">
    <asp:Label runat="server" AssociatedControlID="file1" CssClass="col-md-3 control-label">File 1</asp:Label>
    <div class="col-md-9">
        <input type="file" id="file1"  runat="server" class="filestyle" data-icon="false" data-buttonbefore="true" data-buttontext="Dosya Seç" data-placeholder="Dosya Seçilmedi" multiple>
    </div>

</div> 

<div class="form-group">
    <asp:Label runat="server" AssociatedControlID="file2" CssClass="col-md-3 control-label">File 2</asp:Label>
    <div class="col-md-9">
        <input type="file" id="file2"  runat="server" class="filestyle" data-icon="false" data-buttonbefore="true" data-buttontext="Dosya Seç" data-placeholder="Dosya Seçilmedi" multiple>
    </div>

</div>

Collectives™ on Stack Overflow

JQuery ajax file upload to ASP.NET with input file

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related