current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them, it only takes a minute:
up vote 3 down vote favorite
6

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

1 Answer 1

up vote 8 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 '13 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 '13 at 10:29
    
@de-bugged if this helped you, please press the accept button next to this answer :) – Rune Jan 22 '13 at 14:41
1  
Wow thnx, that worked perfect. :) – de-bugged Jan 23 '13 at 11:09
1  
You deserve a + 1,000,000,000 on this.. been searching for a cross-domain solution that would work all day and yours was the only one that did. Thanks! – Whatevo Nov 25 '13 at 1:46

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.