上傳圖像並從php獲取響應並重新加載相同的圖像。 AJAX上傳

Question

我有一個配置文件頁面，默認圖像將是（no_image.jpg）。 在其下方有一個用戶可以上傳他的圖像​​的選項。 一旦用戶選擇了圖像並在對話框中單擊“打開”，圖像就會上傳到服務器，響應應該用他的新圖像替換（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();
}

幫助者將不勝感激。 提前致謝 ！！...

Answer 1

據我所知（可能是我的知識已經過時）你無法通過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將使用新上傳的圖像路徑更新圖像路徑。 您可能必須修復變量和圖像路徑才能使其正常工作。 我剛剛寫完了