Ajax picture upload fails on iOS generates internal server error

Total Post:30

Points:210
iPhone  Ios  Ios 7 
 1246  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. 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);
                }
            });
        }

      Modified On Apr-06-2018 01:22:19 AM

Answer