これは主に、数か月前に作業していたプロジェクト (mysql からデータを非同期にロードする) からのコピー ペーストです。私はあなたのニーズに合わせて少し変更し、いくつかのコメントを入れ、新しいファイル (getData.php) を作成しました。
映画のダウンロードについては詳しく説明していませんが、画像をダウンロードしてアップロードするのとほぼ同じプロセスです。必要に応じて調整できることを願っています。
これら 2 つのファイルをディレクトリに配置し、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>
これは 2 番目のファイル 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;
?>