AJAX PICTURE UPLOAD FAILS ON IOS GENERATES INTERNAL SERVER ERROR

David Miller

Total Post:30

Points:210
Posted by  David Miller
iPhone  Ios  Ios 7 
 928  View(s)
Ratings:
Rate this:
I implemented an ajax file upload Everything works fine in all browsers, but Safari on iOS. As response I get an Internal Server Error.

I checked my serverside code, but there's nothing wrong. I even get the error, if I write a die(); at the first line of code in the serverside PHP script. It seems as if Safari uploads the picture wrongly. Maybe somebody can help me fix this bug. Thanks in advance!

This is the HTML-Code:

<input type="file" id="pict" accept="image/*">

<input type="text" id="field1">

<input type="text" id="field2">

<button id="send">Send</button>

And this the Javascript:

    var files = false;

 

    $('#pic').on('change', prepareUpload);

 

    function prepareUpload(event) {

        files = event.target.files;

    }

 

    $("body").on("click", "#send", function () {

        uploadTB();

    });

 

    function uploadTB() {

        var postdata = new FormData();

        if (files !== false) {

            $.each(files, function (key, value) {

                postdata.append(key, value);

            });

        }

        postdata.append("field1", $("#field1").val());

        postdata.append("field2", $("#field2").val());

        $.ajax({

            url: 'http://example.org/index.php',

            type: 'POST',

            data: postdata,

            cache: false,

            processData: false,

            contentType: false,

            success: function (data) {

                console.log("sucess");

            },

            error: function (jqXHR, textStatus, errorThrown) {

                console.log(jqXHR, textStatus, errorThrown);

            }

        });

    }

  1. Tom Cruser

    Post:28

    Points:196
    Re: Ajax picture upload fails on iOS generates internal server error

    try this:

        var files = false;

     

        $('#pic').on('change', prepareUpload);

     

        function prepareUpload(event) {

            files = event.target.files;

        }

     

        $("body").on("click", "#send", function () {

            uploadTB();

        });

     

        function uploadTB() {

            var postdata = new FormData();

            if (files !== false) {

                $.each(files, function (key, value) {

                    postdata.append(key, value);

                });

            }

            postdata.append("field1", $("#field1").val());

            postdata.append("field2", $("#field2").val());

            $.ajax({

                url: 'http://example.org/index.php',

                type: 'POST',

                data: formData,

                mimeType: "multipart/form-data",

                contentType: false,

                cache: false,

                processData: false,

                success: function (data) {

                    console.log("sucess");

                },

                error: function (jqXHR, textStatus, errorThrown) {

                    console.log(jqXHR, textStatus, errorThrown);

                }

            });

        }

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!