这主要是我一个月前工作的一个项目(从 mysql 异步加载数据)的复制粘贴。我根据您的需要对其进行了一些更改,我为您添加了一些评论,并创建了一个新文件 (getData.php)。
我没有详细介绍下载电影,但是它会下载图像并上传,过程几乎相同,希望您可以根据需要进行调整。
将这两个文件放在一个目录中并运行 index.php
这是第一个文件:index.php
<html>
<head>
<script type="text/javascript">
var request = false;
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = false;
}
}
}
if (!request)
alert("Error initializing XMLHttpRequest!");
</script>
<script type="text/javascript">
function getData()
{
//inform the user for to wait a little bit
var txt=document.getElementById("messageBox")
txt.innerHTML="Please wait for the image to download...";
//we will call asychronously getData.php
var url = "getData.php";
var params = "";//no url parameters
request.open("POST", url, true);//use post for connect harder to attack, lots of data transfer
//Some http headers must be set along with any POST request.
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=utf-8");
request.setRequestHeader("Content-length", params.length);
request.setRequestHeader("Connection", "close");
request.onreadystatechange = updatePage;
request.send(params);
}////////////////////
//You're looking for a status code of 200 which simply means okay.
function updatePage() {
if (request.readyState == 4) {
if (request.status == 200)
{
//getData.php sends as the image size, get it
var r=request.responseText.split("$");//$ is a custom data separator I use
//inform the user
var txt=document.getElementById("messageBox")
txt.innerHTML="The file was downloaded! Its size is:"+r[0]+"x"+r[1]+" the name is:"+r[2];
/*r is a javascript array, 0=width, 1=height, 2=file name
*/
//display the image
document.getElementById("imageBox").style.width = r[0] + 'px';
document.getElementById("imageBox").style.height = r[1] + 'px';
document.getElementById("imageBox").style.backgroundImage = "url("+r[2]+")";
}
else{
//alert("status is " + request.status);
}
}
}
</script>
</head>
<body onload="getData();">
<div id='messageBox'></div>
<div id='imageBox'></div>
<font color=red>
You see I am under the image but I am already loaded cause
I don't have to wait for the image to load cause it loads asychronously.
Whenever the image is ready the xmlhttp mechanism will let the page
know and the associated javascript function will update the dom and will
update the page without reloading it!
</font>
</body>
</html>
这是第二个文件 getData.php
<?PHP
//make a name for the file
$file_name = rand(1,9999).'.jpg';
//download the file
file_put_contents($file_name, file_get_contents('http://chachatelier.fr/programmation/images/mozodojo-original-image.jpg'));
//get the size of the image
$size = getimagesize($file_name);
//send asycnhronously the width, height, and the name
echo $size[0],'$',$size[1],'$',$file_name;
?>