javascriptでAJAXを使用して画像をアップロードするには？

-4

私のコードは次のとおりです。画像ファイルをアップロードして画像のdivに表示したいと思います。ファイルを選択するときにjsで書かれたajaxコードをトリガーしたいです。ファイルをサーバーにアップロードし、他のイベントなしで表示する必要があります。しかし、このコードは機能しません。画像の代わりに未定義のインデックス画像を表示しています。javascriptでAJAXを使用して画像をアップロードするには？

HTMLのFORM

<!doctype html> 
    <html> 

<body> 
<div id="wb_Image2> 
<img src="" id="Image2" alt=""> 
</div> 


    <input type="file" id="FileUpload1" name="image" onchange="upload()" > 
    <div id="div"> </div> 





</body> 
</html>

JSファイル -

function upload() 
    { 


    var xhttp = new XMLHttpRequest(); //creating a xmlhttp request; 

    xhttp.open("POST","upload.php", true); 
    xhttp.send(); 
    xhttp.onreadystatechange = function() 
    { 
if (xhttp.readyState == 4 && xhttp.status == 200) 
    { 
alert(xhttp.responseText); 
document.getElementById("div").innerHTML= xhttp.responseText; 
document.getElementById("Image2").src = xhttp.responseText; 
    } 
    }; 


}

PHPファイル、upload.php javascriptで

<?php 
    $errors=array(); 
$name=$_FILES['image']['name']; //storing name of d file 
    $ext=explode('.',$name); //ext[0]=nameOfFile and ext[1]= extension 
$size=$_FILES['image']['size'];//storing size 
    $tmpName=$_FILES['image']['tmp_name'];//storing temp name 

    $validExt=array("jpg","jpeg","png","gif");//valid extensions 

if(($size/(1024*1024))>2) //checking file size is less than 2mb or not 
{ 
$errors[]="file size exceeds 2 mb"; 
    echo "file size exceeds 2 mb"; 
} 
    if(empty($errors)) 
{ 
echo $ext[0]." ".$ext[1]; 

$newFilename = $ext[0].substr(session_id(),0,5).rand(0,1000).".".$ext[1]; 
move_uploaded_file($tmpName,"upload/".$newFilename); 


    } 
else { 
echo 'flag 1'; 
} 


?>

出典

2016-07-23 SONIA JOHNSON

http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously – adeneo

あなたが設定することができ.responseType"blob"に、使用URL.createObjectURL()

uはそれをテストしていthanks..but PHPの使用時

function upload() { 
    var file = document.getElementById("FileUpload1").files[0]; 
    var data = new FormData(); 
    data.append("image", file); 
    var xhttp = new XMLHttpRequest(); //creating a xmlhttp request; 
    xhttp.open("POST", "upload.php", true); 
    xhttp.responseType = "blob"; 
    xhttp.send(data); 
    xhttp.onreadystatechange = function() { 
    if (xhttp.readyState == 4 && xhttp.status == 200) { 
     // alert(xhttp.responseText); 
     // document.getElementById("div").innerHTML = xhttp.responseText; 
     document.getElementById("Image2").src = URL.createObjectURL(xhttp.response); 
    } 
    }; 
}

file_get_contents()

echo file_get_contents("upload/" . $newFilename);

出典

2016-07-23 21:18:54 guest271314

？ –

@TusharSahどの部分をテストしましたか？あなたが何を意味するかわからない？ 'javascript'プロセスの' Blob'レスポンスでファイルの内容を 'echo'できます – guest271314

Sir、まだ動作していません –

javascriptでAJAXを使用して画像をアップロードするには？

答えて

関連する問題