Uploading file via ajax

Question

i am trying to upload file using ajax.

form enctype="myltipart/form-data" id="pastTest-form" method="POST" action="upload.php">
            <div class="feedback-form-inputs col-5">
                <div class="input-field">
                    <select id="type" required>
                        <option value="quiz">Quiz</option>
                        <option value="midterm">Midterm</option>
                        <option value="final">Final</option>
                    </select>
                </div>
                <div class="input-field">
                    <input type="text" id="professor"/>
                </div>
                <div class="input-field">
                    <input type="text" id="name"/>
                </div>
                <div class="input-field">
                    <input type="file" id="uploaded_file" name="file" accept="" required />
                </div>
            </div><!-- END feedback-form-inputs -->
            <div class="clear"></div>
                <input type="submit" value="submit" onclick="submit() />
                <div id="upload-status"> </div>
            </form>

my function for opening ajax are in the external file.

function addPastTest1(cid){
    // form variables
    var type = _("type").value;
    var professor = _("professor").value;
    var name = _("name").value;

    var fileSelect = _('uploaded_file');
    var status = _('upload-status');
    event.preventDefault();
    // Update status text.
    status.innerHTML = 'Uploading...';
    // Get the selected files from the input.
    var file = fileSelect.files[0];

    var FileName = file.name;
    var FileSize = file.size;
    var allowed = ["msword", "pdf","pages"];
    var found = false;
    // check if the extension of the file match the allowed ones
    allowed.forEach(function(extension) {
        if (file.type.match('application/'+extension)) {
          found = true;
        }
    })
    if (FileSize >10204){
        status.innerHtml = 'File must be less than 1mb in size';
    }
    if (found==true){
        // Create a new FormData object.
        var formData = new FormData();
        // Add the file to the request.
        formData.append('file', file, FileName);
        // Set up the request.
        var ajax = ajaxObj("POST", "ajaxResponse.php");
        ajax.onreadystatechange = function(){
            if (ajaxReturn(ajax)==true){
                if (ajax.responseText=='failed'){
                status.innerHtml = "failed to upload file";
                }
                else {
                    status.innerHtml = 'uploaded';
                    alert(ajax.responseText);
                }
            }
        }
        ajax.send(formData);            //ajax.send("f="+formData+"&t="+type+"&p="+professor+"&n="+name+"&cid="+cid+"&fn="+FileName);
    }
}

so i am sending formData to the php. but at this point i can not take the file from form data and upload it to the server. here is my php

// Ajax calls this code to add a past test
if (isset($_FILES['file']){
    $file = $_FILES['file'];
            $path = 'files/'.$type.'/'.$fileName;
            $moveResult = move_uploaded_file($file, $path);

        if ($moveResult != true) {
            echo "ERROR: File not uploaded. Try again.";
            //unlink($fileTmpLoc); // Remove the uploaded file from the PHP temp folder
            exit();
        }


    $path = 'files/'.$type.'/'.$fileName;
    $sql = "INSERT into past_papers VALUES ('$name', '$type', '$cid', '$professor','$path')";
    $query = mysqli_query($db_conx,$sql);
    if (mysqli_affected_rows($db_conx)>0){
        echo "success";
        exit();
        }   
    else {
        echo "failed sql";
        exit();
    }
}
?>

Also i want to grab inputs with the file and process them together. Upload file, and insert inputs into database.

You should use the search function, tons of post are related to this for example http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously?rq=1 Also http://stackoverflow.com/search?q=php+ajax+upload — ExoticSeagull, Jan 16 '15 at 17:22
Your upload handling is totally invalid. you need to check `$_FILES['file']['error']` **FIRST**, to see if an upload was acctually performed AND succeeded. You're simply assuming nothing could ever go wrong, which is exactly the wrong thing to do. — Marc B, Jan 16 '15 at 17:23

score 0 · Answer 1 · answered Dec 28 '16 at 13:15

The simplest one I can find. :)

jQuery code

$("#form-id").on('submit',(function(e) {
    e.preventDefault();
    $.ajax({
        url: "file-to-call.php",
        type: "POST",
        data: new FormData(this),
        cache: false,
        processData: false,
        success: function(data) {
            //handle success
        }
   });
}));

HTML code

<form name='form1' method='post' enctype='multipart/form-data' id='form-id'>
    <input type='submit' id='input' value='Upload' />
</form>

Uploading file via ajax

1 Answers1