1

i have a Problem with my Ajax-Fileupload Script. When I upload my Files, the Files are corrupt. When I open the File with Notepad++, i see that there are for example the following Lines:

-----------------------------22998260013704

Content-Disposition: form-data; name="0"; filename="myimage.png"

Content-Type: image/png

filecontent

-----------------------------22998260013704--

When I delete the 3 Lines bevor filecontent und the Line after filecontent, the File is ok. I have no clue, why these 4 Lines are written to the Files. I hope that somebody can help me.

Here is my Javascript-Code:

var myFiles = [];
function ajaxFileUpload() {
    var dataid  = document.getElementById("dataid").getAttribute("data-id"),
        data    = new FormData(),
        maxSize = 100.0,
        file    = null, 
        myUrl   = "xxx/save";
    
$.each(myFiles, function(key, value) {
    console.log(key+" "+value);
    file = value;
    data.append(key, value);
});
var filesize = file.size;
if ((filesize/(1024*1024)) <= maxSize) {
    $.ajax({
        type: "PUT", //<-- http://stackoverflow.com/questions/10475313/ajax-file-upload-with-xmlhttprequest
        url: myUrl,
        processData: false,
        contentType: false,
        data: data,
        beforeSend: function(xhr) {
            xhr.setRequestHeader("X-File-Name", file.name);
            xhr.setRequestHeader("X-File-Size", file.size);
            xhr.setRequestHeader("X-myid", dataid);
        },
        success: function (json) {
            //....
        },
    }); 
} else {
    //...
}
}

And here my relevant PHP-Code:

 private function copyPutFilesToTmp($directory = "") {
    $temp = "xxx";
    if (!is_dir($temp)) {
        mkdir ($temp, 0777, true);
    }
    $tmpPath            = $temp."/";
    $filename           = $_SERVER['HTTP_X_FILE_NAME'];
    $in                 = fopen('php://input', 'r');
    $ziel               = $tmpPath.$filename;
    if (!file_exists($ziel)) {
            $fileuploadok   = true;
            $out            = fopen($ziel, 'w');
            $data       = fread($in, 1024);
            while($data) {
                if ($data != false) {
                    fwrite($out, $data);                        
                } else {
                    $fileuploadok = false;
                }
                $data       = fread($in, 1024);
            }
            fclose($in);
            fclose($out);
            if ($fileuploadok === FALSE) {
                //...
            } else {
                //...
            }
        } else {
            //...
    }
    return $answer;
}

1 Answer 1

0

I found the problem. if I sent the file directly as data and not within a FormData it works!

So the right Code is:

var myFiles = [];
function ajaxFileUpload() {
    var dataid  = document.getElementById("dataid").getAttribute("data-id"),
        maxSize = 100.0,
        file    = null, 
        myUrl   = "xxx/save";

$.each(myFiles, function(key, value) {
    file = value;
});
var filesize = file.size;
if ((filesize/(1024*1024)) <= maxSize) {
    $.ajax({
        type: "PUT", //<-- https://stackoverflow.com/questions/10475313/ajax-file-upload-with-xmlhttprequest
        url: myUrl,
        processData: false,
        contentType: false,
        data: file,
        beforeSend: function(xhr) {
            xhr.setRequestHeader("X-File-Name", file.name);
            xhr.setRequestHeader("X-File-Size", file.size);
            xhr.setRequestHeader("X-myid", dataid);
        },
        success: function (json) {
            //....
        },
    }); 
} else {
    //...
}
}

found here: AJAX File Upload with XMLHttpRequest

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.