0

I am trying to upload files without using any jquery plugin based on the idea from How to upload multiple files using PHP, jQuery and AJAX. Now my html portion for multiple files is like this.

<form method="post" name="addstudent" id="registrationform" enctype="multipart/form-data">
some input fields

<!--first file-->
<div class="file_div_child">
<input class="file" type="file"  name="file[]" style="display: block;">
<button class="remove first_remove">X</button>
</div>

<!--second file-->
<div class="file_div_child">
<input class="file" type="file"  name="file[]" style="display: block;">
<button class="remove first_remove">X</button>
</div>
-------so on
--also other input fields in form
<input type="submit" id="buttontext" class="student_registrationform_button" value="submit" /> 
</form>

My jquery:

$('#buttontext').click(function(){
  formdata = false;
            if (window.FormData) {
                    formdata = new FormData();
                }
           var i = 0, len = $(".file").length, img, reader, file;
           $('.file').each(function() { var file = this.files[0];
            if (window.FileReader) {
                            reader = new FileReader();
                            reader.readAsDataURL(file);
                     }
                if (formdata) {
                    formdata.append("file", file);
                }
           });

 $.ajax({
                    url:  'process.php',
                    type: 'POST',
                    data:formdata ,

                    success:function(data){  //alert(data);
                    console.log(data);return false;
});

In the process.php.I am checking $_POST['file'] and $_POST['other_inputfields'].Its giving me null string

Community
  • 1
  • 1
Techy
  • 2,626
  • 7
  • 41
  • 88
  • What exactly are you trying to achieve? You can see from the other answer that you should be using `FormData` to upload files, not `serialize()`. If you want to find out how many file fields there are, use `$('.file').length` – Rory McCrossan Dec 14 '15 at 13:40
  • Thanks for your help.But I need to add other form elements,so will it create any problem for other elements if I use FormData instead of serialize() @RoryMcCrossan – Techy Dec 14 '15 at 14:09
  • 1
    Then use [`FormData.append()`](https://developer.mozilla.org/en-US/docs/Web/API/FormData/append). You cannot upload the binary data of a file by using `serialize()`. – Rory McCrossan Dec 14 '15 at 14:34
  • I have used $(".file").files[i] to get the filename inside the loop.But its showing error @RoryMcCrossan – Techy Dec 14 '15 at 14:37
  • 1
    You need to access the `files` property of each individual DOMElement, not the collection in the jQuery object: `$('.file').each(function() { var file = this.files[0]; });` – Rory McCrossan Dec 14 '15 at 14:44
  • When I try to check formdata result like this-formdata = new FormData();formdata.append("file", file); JSON.stringify(formdata), it shows empty string – Techy Dec 14 '15 at 14:52
  • Why are you trying to JSON.stringify it? That's the opposite of what needs to happen. Seriously, just look at the accepted answer in the question you linked to and copy it. That's it, job done. – Rory McCrossan Dec 14 '15 at 16:16
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/97920/discussion-between-techy-and-rory-mccrossan). – Techy Dec 15 '15 at 04:30

0 Answers0