В основном это копирование из проекта (асинхронная загрузка данных из 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;
?>