0

I have a custom frontend form. The form is submitted via ajax. The form has a "type=file" field. I want to save the uploaded file to a folder.How can I do that. Please help..

How is it possible to get the uploaded file in ajax sumbitted form

This is my "type=file" field in phtml.

<div class="input-box">
    <label for="addfile"><?php echo $this->__('Select File(s)');?></label><br />
    <p>Upload any files that are necessary for your order by clicking on the Add File(s) button below.</p>
    <input type="file" class="file" id="attachment" name="attachement" style="display: none;" onchange="fileSelected(this)" value=""/>
    <input type="button" class="button" id="btnAttachment" onclick="openAttachment()" value="Add File(s)"/>
</div>

This is my button field in phtml.(button action is file upload)

<div>
    <input type="button" class="button" id="btnUpload" onclick="callAjax()" value="Upload File(s)"/>
</div>

This is my script

function callAjax(){
    var filename = document.getElementById("filename").innerHTML;//alert(test);
    var companyname = document.getElementById("company").value;
    var name = document.getElementById("f_name").value+" "+document.getElementById("l_name").value;
    var phnumber = document.getElementById("phnmbr").value;
    var email = document.getElementById("email").value;
    var file = document.getElementById("select-file-det").innerHTML;
     jQuery.ajax({
        type    : "POST",
        url     : "<?php echo Mage::getUrl('module/index/action'); ?>",
        data    : ({company: companyname,name: name,phnumber: phnumber,email:email,file: file,filename:filename }),
        dataType: "json",
        complete: function(response) {   
           document.getElementById("success-msg").style.display = "block"; 
           document.getElementById("select-file-form").style.display = "none"; 
           //setTimeout(function() { window.location=window.location;},3000);           
        },
    });
}
0

You can try:

function callAjax(){

     jQuery.ajax({
        type    : "POST",
        url     : "<?php echo Mage::getUrl('module/index/action'); ?>",
        data: jQuery('form').serialize(),
        success: function (response) {
           document.getElementById("success-msg").style.display = "block"; 
           document.getElementById("select-file-form").style.display = "none";                          
        },
    });
}
4
  • The button type is not submit. I have added the code. Please see edited question – E.B Jul 6 '17 at 7:35
  • @E.B check my updated answer – Nikunj Vadariya Jul 6 '17 at 11:10
  • I have tried this method. But i got all field values except the input type="file" field – E.B Jul 6 '17 at 11:46
  • @E.B You need to add enctype="multipart/form-data" in your form. – Nikunj Vadariya Jul 6 '17 at 12:28
0
  1. First You need to Select image file through following line of html code

    input type="file" id="image_to_upload"
  2. After that you need to write the following jQuery code to catch this event.


    jQuery.noConflict();    
    formdata = new FormData();      
    jQuery("#image_to_upload").on("change", function() {
        var file = this.files[0];
        if (formdata) {
            formdata.append("image", file);
            jQuery.ajax({
                url: "destination_ajax_file.php",
                type: "POST",
                data: formdata,
                processData: false,
                contentType: false,
                success:function(){}
            });
        }                       
    }); 

  1. In the destination ajax file you can access image by the following variable
print_r($_FILES);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.