<!--测试页面-->
<html> <head> <script> var files; var url = "/upimage/3g_xhr.PHP"; function getPath(fileQuery){ var i; files =fileQuery.files; var imgContainer=document.getElementById("imgPanel"); for(i=0;i<files.length;i++){ var reader = new FileReader(); var filename=files[i].name; reader.onload =(function(filename){ return function(e){ var obj=document.createElement("tr"); obj.innerHTML="<td><img title='"+filename +"' src='"+e.target.result +"' style='width:100;height:100;' /></td><td " +" style='vertical-align:bottom;'>"+filename+"</td>"; imgContainer.appendChild(obj); }; })(filename); reader.readAsDataURL(files[i]); } } function getvl(obj){ getPath(obj); } function submitImg(){ for(var j=0;j<files.length;j++){ var xhr = new XMLHttpRequest (); xhr.onreadystatechange = function () { if (xhr.readyState == 4) { if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) //200:Success.304:Tell browser to read cache. { alert(xhr.responseText); } } } var boundary = "------" + new Date () .getTime (); xhr.open ("post",url,true ); var formData = new FormData (); formData.append("name","nik22"); formData.append ("upfile",files[j]); xhr.send (formData); } } </script> </head> <body> <form enctype="multipart/form-data" action="" method="post" id="upform"> <div id="text" style="color:#f00;"></div> 选择图片:<input type="file" name="upfile[]" id="upfile" multiple="multiple" onchange="getvl(this)" /> <table id="imgPanel"> </table> <input type="button" value="上传" /> </form> </body> </html>
<!--upimage/3g_xhr.PHP-->
<?PHP echo "No. files uploaded : ".count($_FILES['upfile']['name'])."<br>"; $uploadDir = "images_xhr/"; /** for ($i = 0; $i < count($_FILES['upfile']['name']); $i++) { echo "File names : ".$_FILES['upfile']['name'][$i]."<br>"; $ext = substr(strrchr($_FILES['upfile']['name'][$i],"."),1); // generate a random new file name to avoid name conflict $fPath = md5(rand() * time()) . ".$ext"; echo "File paths : ".$_FILES['upfile']['tmp_name'][$i]."<br>"; $result = move_uploaded_file($_FILES['upfile']['tmp_name'][$i],$uploadDir . $fPath); if (strlen($ext) > 0){ echo "Uploaded ". $fPath ." succefully. <br>"; } } echo "Upload complete.<br>"*/ if($_FILES['upfile']['size'] == 0) die("<script>alert('请选择您要上传的图片!');history.go(-1); </script>"); $imageinfo = getimagesize($_FILES['upfile']['tmp_name']); if($imageinfo[0] > 1200 || $imageinfo[1] > 800) die("<script>alert('图片大小不符合标准(长1200宽800)!');history.go(-1);</script>"); if($imageinfo[2] < 1 || $imageinfo[2] > 3) die("<script>alert('图片只能是GIF,JPG,PNG格式!');history.go(-1);</script>"); //$imageinfo[2] 的值得于1,表示是gif格式, 2是jpg格式,3是png if($imageinfo[2] == 1) { $imageinfo[2] = ".gif"; } elseif($imageinfo[2] == 2) { $imageinfo[2] = ".jpg"; }else { $imageinfo[2] = ".png"; } //文件名:把时间和文件名的md5值组合,加上后缀得到文件名。 $randval = rand(); $imgname = date("YmdHis").substr(md5($randval),5).$imageinfo[2]; copy($_FILES['upfile']['tmp_name'],$uploadDir.$imgname) or die("move img error!"); echo "Upload succefully.<br>"; ?>
注:1)上面的PHP文件放到文件夹upimage下,同时在PHP所在文件夹新建文件夹images_xhr,用于存
2)如果不通过ajax上传图片,那么将html页面中的form的action设置为/upimage/3g_xhr.PHP,
提交按钮的type设置为submit,同时将PHP文件中的注释的那段去掉注释,同时将它后面的代码
注释掉,就可以实现同时提交多个图片。