Ajax 文件上传到 PHP 使用 javascript 弹出窗口

Question

I am having problem with uploading file with JavaScript Popup. This is my first experience to upload file with such JavaScript popup. I don't know how to pass the input[type:file] to the ajax function and then send to the php file for uploading.

This is the button which calls the popup:

<a class="btn btn-primary btn-sm" data-toggle="modal" data-target="#uploadDocument">Upload Document</a>
<div class="modal fade" id="uploadDocument" role="dialog">
    <div class="modal-dialog" style="top: 20%;">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header" style="background-color: #367FA9">
                <h4 class="modal-title" id="myModalLabel" style="color:white">Upload Document</h4>
            </div>
            <!-- Modal Body -->
            <div class="modal-body" style="padding-top: 20px; padding-right: 40px; padding-left: 40px;">
                <!-- <img src="police/images/new.jpg" width="120px" height="100px"> -->
                <p id="uploadMD"></p>
                <form role="form" id="uploadForm" >
                    <div class="form-group">
                      <input type="hidden" name="" id="rowid" value="<?php echo $id; ?>">
                    </div>
                    <div class="form-group">
                      <label>Document Name</label>
                      <input type="text" name="" id="documentName" class="form-control">
                    </div>
                    <div class="form-group">
                      <label>Document</label>
                      <input type="file" class="form-control" placeholder="Please Select File" id="documentFile">
                    </div>
                    <div class="form-group text-center">
                        <button type="button" class="btn btn-primary submitBtn block" style="background-color: #367FA9"  onclick="uploadDocument()" style="width: 100%;">Upload Document</button>
                    </div>  
                </form>
            </div>
            <!-- Modal Footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

The javascript code is as follows:

<script>
function uploadDocument(){
    var rowid = $('#rowid').val();
    var documentName = $('#documentName').val();
    var documentFile = $('#documentFile').val();
    if(documentName.trim() == '' ){
        alert('Please write file name');
        $('#documentName').focus();
        return false;
    }else if(documentFile.trim() == '' ){
        alert('Please Select File');
        $('#documentFile').focus();
        return false;
    }else {
        $.ajax({
            method:'POST',
            url:'upload.php',
            enctype: 'multipart/form-data',
            data:'&rowid='+rowid+'&documentName='+documentName+'&documentFile='+documentFile,
              success: function(result){
                $('#uploadForm').trigger('reset');
                if(result == '1'){
                 $('#uploadMD').html('<span style="color:green;">Your File is uploaded. Thank you</span>');
                 setTimeout(function(){ window.location.reload() }, 5000);
               }
                else{
                    $('#uploadMD').html('<span style="color:red;">Uploading Problem</span>').fadeIn().delay(5000).fadeOut();
                }
              }
        });
    }
}
</script>

and the upload.php file is here:

<?php
    $rowid   = $_POST['rowid'];
    $documentName   = $_POST['documentName'];
    $file_name = $_FILES['documentFile']['name'];
    $file_move = move_uploaded_file($file_tmp,"../uploads/ps/".$file_name);
    include "../include/configs.php";
      if ($file_move) {
        $q2 = "UPDATE requests SET support_doc='$file_name' WHERE slug='$id'";
          $query = mysqli_query($con, $q2);
        if ($query) {
           echo $success = 1; 
        }
      }
    ?>

Thanks in advance.

Answer 1

Try formdata to pass in php file ajax call

var formData = new FormData();
formData.append('section', 'general');
formData.append('action', 'previewImg');
// Attach file
formData.append('image', $('input[type=file]')[0].files[0]); 


$.ajax({
    url: 'Your url here',
    data: formData,
    type: 'POST',
    contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
    processData: false, // NEEDED, DON'T OMIT THIS
    // ... Other options like success and etc
});

Thanks