0

デフォルトの画像（no_image.jpg）になるプロファイルページが1つあります。その下には、ユーザーが自分の画像をアップロードできるオプションがあります。ユーザーが画像を選択し、ダイアログ ボックスで [開く] をクリックすると、画像がサーバーにアップロードされ、応答で (no_image.php) が新しい画像に置き換えられます。必要な正確な出力を得るために、グーグルとスタッキングを試みました。しかし、私はそれを見つけることができません。

style

#upload_progress {display:none;}

HTML

 <div id="upload_progress">
    </div>
<form enctype="multipart/form-data" method="post" action="">
        <input type="file" name="file" id="file" onchange="uploadFile()"/>
        <input type="submit" name="submit" />
    <form>

js

var handleUpload = function(event){
    event.preventDefault();
    event.stopPropagation();

    var fileInput = document.getElementById('file');

    var data = new FormData();

    data.append('ajax', true)
        data.append('file', fileInput.files);


    var request = new XMLHttpRequest();

    request.upload.addEventListener('progress', function(event){
        if(event.lengthComputable){
            var percent = event.loaded  /event.total;
            var progress = document.getElementById('upload_progress');

            while(progress.hasChildNodes()){
                progress.removeChild(progress.firstChild);
            }
            progress.appendChild(document.createTextNode(Math.round(percent*100) + '%'))
        }
    });

    request.upload.addEventListener('load', function(event){
        document.getElementById('upload_progress').style.display = 'none';
    });

    request.upload.addEventListener('error', function(event){
        alert('upload failed');
    });

    request.addEventListener('readystatechagne', function(event){
        if(this.readyState == 4){
            if(this.status == 200){
                var links = document.getElementById('uploaded');

                console.log(this.response);
                var uploaded = eval(this.response);

                var div, a;

                div = document.createElement('div');
                a = document.createelement(a);

                a.setAttribute('href', 'files/'+uploaded);
                a.appendChild(document.createTextNode(uploaded[i]));

                div.appendChild(a);
                links.appendChild(div);

            }else{

            }
        }
    });

    request.open('POST', '/profile');
    request.setRequestHeader('Cache-Control', 'no-cache');

    document.getElementById('upload_progress').style.display = 'block';
    request.send(data);
}

window.addEventListener('load', function(event){
    var submit = document.getElementById('submit');
    submit.addEventListener('click', handleUpload);
});

PHP

if($_FILES['file'] != '')
{
    //print_r($_FILES);

        $filename = basename($_FILES['file']['name']);

        $sqlUpdate  =   mysql_query("UPDATE tableA SET user_img = '".$filename."' WHERE email = '".$userEmail."'");
        $newname = '\images\profile/'.$filename;

        if($_FILES['file']['error'] == 0 && move_uploaded_file($_FILES['file']['tmp_name'], $newname));
        $Uploaded = $filename;
}

if(!empty($_POST['ajax'])){
    die(json_encode($Uploaded));
    exit();
}

ヘルパーは大歓迎です。前もって感謝します ！！...

4

1 に答える 1

2

私の知る限り（私の知識が古くなっているかもしれません）、AJAX経由で画像を送信することはできません。

フォームを次のように変更します

<iframe id="hiddenIframe"></ifram>
<form enctype="multipart/form-data" method="post" action="pageGettingData.php" target="hiddenIframe">
    <input type="file" name="file" id="file" onchange="uploadFile()"/>
    <input type="submit" name="submit" />
<form>

関数でuploadFile()は、フォームを送信するコードを使用します。

これで、データは通常の形式でアップロードされますが、リダイレクトなどを引き起こさない非表示の iframe にアップロードされます。

あなたのPHPコードで

if($_FILES['file'] != '')
{
    //print_r($_FILES);

        $filename = basename($_FILES['file']['name']);

        $sqlUpdate  =   mysql_query("UPDATE mp_project_buyer_query SET user_img = '".$filename."' WHERE email = '".$userEmail."'");
        $newname = '\images\profile/'.$filename;

        if($_FILES['file']['error'] == 0 && move_uploaded_file($_FILES['file']['tmp_name'], $newname));
        $Uploaded = $filename;

        echo '<script>parent.updateImage("' . $Uploaded . '");'; // add a javascript
}

if(!empty($_POST['ajax'])){
    die(json_encode($Uploaded));
    exit();
}

php が画像を取得すると、JS 関数が呼び出されます。その JS は非表示の Iframe にあるため、親ファイルで関数を呼び出す必要があります。

HTML ファイルで、新しい JS 関数を作成します。updateImage

function updateImage(imgPath){
    $('#userImage").attr('src': imgPath);
}

この JS は、新しくアップロードされた画像パスで画像パスを更新します。機能させるには、変数と画像パスを修正する必要がある場合があります。早速書いてみました

于 2013-02-19T12:16:47.473 に答える