1

Image upload functionality is working fine using HTML, Javascript and PHP. But now I am trying to convert it into HTML, JQuery and PHP but I am not able to upload photo using below code.

I am not able to get file type variable on .js page and then file itself on php page (upload_p.php)

Please advise what I am doing wrong. I am trying to get this work for last 2 days but no luck yet.

upload.php

<form name="Uform" id="Uform" novalidate>
<div class="control-group form-group">
    <input type="file" name="img" id="img">
    <div id="success"></div>
    <button type="submit" class="btn btn-primary">Upload</button>
</div>
</form>

upload.js

$(function() {

$("#UForm file").jqBootstrapValidation({
    preventSubmit: true,
    submitSuccess: function($form, event) {
        event.preventDefault(); 

        // Try #1
        var form   = new FormData() ;
        var file = $('#img')[0].files[0];
        formData.append("file", file);

        // Try #2
        var FileData = $('#img').prop('files')[0];   
        var form_data = new FormData();                  
        form_data.append('file', FileData);


        $.ajax({
            url: "./user/upload_.php",
            type: "POST",
            data: {

                // Try #1
                upload : 1,
                data : file

                // Try #2
                img: img,
            },
            cache: false,
        })
    },
});

upload_p.php

$str_photo = "";
if(isset($_FILES['img'])) { $str_photo = trim($_FILES['img']['name']); }
.
.    
UploadFile($_FILES["img"]["tmp_name"],$str_img_path);
.
.
SQL Query to insert data into database table
.
.
$response['status']='SUC';
$response['message']="Image uploaded successfully";
echo json_encode($response);
return;
RekKA
  • 150
  • 9
  • Have you able to print data of $_FILES ? – DiniZx Jul 08 '16 at 07:17
  • You cannot upload a file using just jquery, use a plugin https://blueimp.github.io/jQuery-File-Upload/ – ka_lin Jul 08 '16 at 07:17
  • 1
    also add the enctype='multipart/form-data' in form tag , its best practice. – DiniZx Jul 08 '16 at 07:18
  • Possible duplicate of [How can I upload files asynchronously?](http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously) – ka_lin Jul 08 '16 at 07:20
  • @DiniZx, enctype='multipart/form-data' this is there in my code but I forgot to mention in question here. Also page is not submitted above both options I tried so not able to print $_FILES – RekKA Jul 08 '16 at 07:45

1 Answers1

0

Use the below ajax code

.ajax({
    url: "./user/upload_.php",
    data: {

            // Try #1
            upload : 1,
            data : file

            // Try #2
            img: img,
        },
    cache: false,
    contentType: false,
    processData: false,
    type: 'POST',
    success: function(data){
        alert(data);
    }
});

After that try with

print_r($_FILES);

in your upload_.php

Arun
  • 3,640
  • 7
  • 44
  • 87
  • but with which option I should try your code? Are both options tried by me are correct? Please let me know. – RekKA Jul 08 '16 at 07:44