JQuery upload

Ive been struggeling to upload a file by jQuery. I want to upload the file sepretly (without having to enclose it in a form or iFrame).

So, Ive constructed the following:-
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $(document).on("click","#btnUpload", function(e) {
            var fileSelect = $("#tstFile");
            var files = fileSelect.files;

            var frmData = new FormData();

            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                frmData.append('tstFile[]', file, file.name);
            }

            $.ajax({
                url: 'upload.php',
                type: 'POST',
                data: frrmData,
                cache: false,
                contentType: false,
                processData: false,
                success:function(data){
                    alert(data);
                },
            });
        });
    });
</script>

    <input type="file" id="tstFile" name="tstFile" />
    <button id="btnUpload">Upload</button>

Open in new window


On the debugger I get "files not found", and nothing uploaded on my upload.php page into the $_FILES object.

Any ideas how to fix this?
tonelm54Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chris StanyonWebDevCommented:
If that's a copy/paste of your code, then you have a typo:

data: frrmData,

should be:

data: frmData
0
hieloCommented:
>> var files = fileSelect.files;
files is a property of <input type="file">.  That means that for the above line to work as expected, fileSelect needs to be a reference to some <input type="file"> node.  Unfortunately, fileSelect is NOT a reference to an <input type="file"> node.

>> var fileSelect = $("#tstFile");
The jquery $() function returns a jquery object.  What you actually need is the DOM node that #tstFile refers to, not the jquery object.  So, call the get() method on your jquery object:

var fileSelect = $("#tstFile").get(0);

and be sure to fix the typo pointed out by Chris Stanyon.
data: frmData

>> frmData.append('tstFile[]', file, file.name);
Are you trying to allow multiple files at once? If so add the "multiple" attribute to your <input> tag as well.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.