4

だから私はフォームデータと一緒に画像をサーバーにアップロードしようとしています。FileReader APIを使用して、画像をデータに変換し、サーバーにアップロードしています。AJAXJqueryを使用してHTML5アップローダーに似たコードをフォローしています。

データはjqueryで変換されますが、サーバーに何も送信されておらず、エラーは生成されません。

$('#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コード

<?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);
?>

大きな画像ファイルまたはFileReaderAPIが原因で問題が発生しますか？

4

1 に答える 1

12

ファイルのアップロードがファイルリーダーで機能するかどうかはわかりませんが、別の方法で機能させることができます。

var formData = new FormData($(".file_upload_form")[0]);
$.ajax({
    url: "upload_file.php", // server script to process data (POST !!!)
    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: "application/octet-stream", // Helps recognize data as bytes
    processData: false
});

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

このようにして、データをPHPファイルに送信し、それを使用$_FILESして処理することができます。残念ながら、私が知る限り、これはIEでは機能しません。IEでこれを可能にするプラグインが利用できるかもしれませんが、私はそれらのどれも知りません。

于 2013-01-22T10:11:20.030 に答える