CODEWITHSUNDEEP
phpjqueryajaxfile-upload
AdRock
AdRock

Reputation: 3096

pass <input type="file"> to other form after submit

I have an upload form that submits using ajax.

This all works fine but what i want to do is have the name of the file i was uploading stored in a hidden input type so when i submit my form with text fields,the name of the image can be submitted to the database.

I have noticed that when i submit my main form to database, the name of the image has been lost. I have just realised the input file is on the upload form so that's why the name won't have been submitted.

My question is how do i pass the name of the uploaded file to my other form?

In my main form i presume i would have a

<input type="hidden" name="imgname" id="imgname" value="" />

Here is my jquery that submits the form 

<script type="text/javascript"> 
    $(document).ready(function() { 
        //elements
        var progressbox     = $('#progressbox');
        var progressbar     = $('#progressbar');
        var statustxt       = $('#statustxt');
        var submitbutton    = $("#SubmitButton");
        var myform          = $("#UploadForm");
        var output          = $("#output");
        var lotterydiv      = $("#lottovidpreview");
        var completed       = '0%';

        $(myform).ajaxForm({
            beforeSend: function() { //brfore sending form
                lotterydiv.remove();
                submitbutton.attr('disabled', ''); // disable upload button
                statustxt.empty();
                progressbox.slideDown(); //show progressbar
                progressbar.width(completed); //initial value 0% of progressbar
                statustxt.html(completed); //set status text
                statustxt.css('color','#000'); //initial color of status text
            },
            uploadProgress: function(event, position, total, percentComplete) { //on progress
                progressbar.width(percentComplete + '%') //update progressbar percent complete
                statustxt.html(percentComplete + '%'); //update status text
                if(percentComplete>50) {
                    statustxt.css('color','#fff'); //change status text to white after 50%
                }
            },
            complete: function(response) { // on complete
                output.html(response.responseText); //update element with received data
                myform.resetForm();  // reset form
                submitbutton.removeAttr('disabled'); //enable submit button
                progressbox.slideUp(); // hide progressbar
            }
        });
    });

</script>

I am also presuming I need to do something in the complete: function part but don't know what. Would i need to get the name of the file that was sent to the php script to move the image or can i grab it from the client side?

Upvotes: 4

Views: 2275

Answers (1)

AdRock
AdRock

Reputation: 3096

I just had to enter this in the complete: function

$("#imagename").val($("#filepc").val());

Upvotes: 1

Related Questions