Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite
1

So i am trying to upload an image along with form data to server. I'm using FileReader API to convert image to data and upload to server. I'm following the code similar to HTML5 uploader using AJAX Jquery.

The data is converted in jquery, but nothing is being sent to server and there is no error generated. 

$('#formupload').on('submit', function(e){
    e.preventDefault();
    var hasError = false;
    var file = document.getElementById('file').files[0];
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = shipOff;

    function shipOff(event) {
        result = new Image(); 
        result.src = event.target.result;
        var fileName = document.getElementById('file').files[0].name; 
        $.post('test.php', { data: result, name: fileName });
    }

PHP Code

<?php
$data = $_POST['data'];
$fileName = $_POST['name'];
echo $fileName;
$fp = fopen('/uploads/'.$fileName,'w'); //Prepends timestamp to prevent overwriting
fwrite($fp, $data);
fclose($fp);
$returnData = array( "serverFile" => $fileName );
echo json_encode($returnData);

?>

Is the problem due to large image file or FileReader API

share|improve this question
add comment (requires an account with 50 reputation)

1 Answer

up vote 2 down vote accepted

I'm not sure if file upload works with filereaders, but there is a different way to make it work:

var formData = new FormData($('.file_upload_form')[0]);
$.ajax({
    url: 'upload_file.php', //server script to process data
    type: 'POST',
    xhr: function() {  // custom xhr
        myXhr = $.ajaxSettings.xhr();
        if(myXhr.upload){ // check if upload property exists
            // for handling the progress of the upload
            myXhr.upload.addEventListener('progress',progressHandlingFunction, false); 
        }
        return myXhr;
    },
    success: function(result)
    {
        console.log($.ajaxSettings.xhr().upload);
        alert(result);
    },
    // Form data
    data: formData,
    //Options to tell JQuery not to process data or worry about content-type
    cache: false,
    contentType: false,
    processData: false
});

function progressHandlingFunction(e){
    if(e.lengthComputable){
        $("#progress").text(e.loaded + " / " e.total);
    }
}

This way you send the data to the PHP file and you can use $_FILES to process it. Unfortunately, this does not work in IE as far as I know. There might be plugins available that make this possible in IE, but I don't know any of them.

share|improve this answer
This code would only send the image to server. I need to send the image along with rest of form data at same time. I was able to send the data to server had to replace /uploads/ with uploads/. But image content cannot be opened – de-bugged Jan 22 at 10:26
@de-bugged this actually will send the image and the data, var formData = new FormData($('.file_upload_form')[0]); will make sure of that. The form can contain file uploads and other data at the same time and will simply convert it to a normal $_POST value. If you have a text input with the name text, that one will also be accessible within the $_POST. – Rune Jan 22 at 10:29
@de-bugged if this helped you, please press the accept button next to this answer :) – Rune Jan 22 at 14:41
Hi Rune, Tried your method. The content of the formData is append:function append() and no other form data. Ive also tried to append all form data into formData and call post request. no data is sent to server. Any suggestions? – de-bugged Jan 23 at 4:00
1  
Wow thnx, that worked perfect. :) – de-bugged Jan 23 at 11:09
show 6 more commentsadd comment (requires an account with 50 reputation)

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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