如何在JavaScript中使用AJAX上传图片？

-4

这里是我的代码 - 我要上传图片文件，并显示在图像DIV。我想触发写在JS AJAX代码时，我选择file.It应上传文件到服务器并显示它没有任何其他事件。但是这段代码不起作用。它显示的是未定义的索引图像，而不是图像。如何在JavaScript中使用AJAX上传图片？

HTML表单

<!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 FILE-

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的

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

在javascript可以设置.responseType到"blob"，使用URL.createObjectURL()

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

在PHP中使用file_get_contents()

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

来源

2016-07-23 21:18:54 guest271314

thanks..but具有u测试它？ –

@TusharSah测试哪个部分？不确定你的意思？您可以'echo'文件的内容，在'javascript'过程'Blob'响应 – guest271314

爵士，它仍然没有工作 –

如何在JavaScript中使用AJAX上传图片？

回答

相关问题