<!--测试页面-->
<html> <head> <script> var files; var url = "/upp_w_picpath/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>
<!--upp_w_picpath/3g_xhr.php-->
<?php echo "No. files uploaded : ".count($_FILES['upfile']['name'])."<br>"; $uploadDir = "p_w_picpaths_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>"); $p_w_picpathinfo = getp_w_picpathsize($_FILES['upfile']['tmp_name']); if($p_w_picpathinfo[0] > 1200 || $p_w_picpathinfo[1] > 800) die("<script>alert('图片大小不符合标准(长1200宽800)!');history.go(-1);</script>"); if($p_w_picpathinfo[2] < 1 || $p_w_picpathinfo[2] > 3) die("<script>alert('图片只能是GIF,JPG,PNG格式!');history.go(-1);</script>"); //$p_w_picpathinfo[2] 的值得于1,表示是gif格式, 2是jpg格式,3是png if($p_w_picpathinfo[2] == 1) { $p_w_picpathinfo[2] = ".gif"; } elseif($p_w_picpathinfo[2] == 2) { $p_w_picpathinfo[2] = ".jpg"; }else { $p_w_picpathinfo[2] = ".png"; } //文件名:把时间和文件名的md5值组合,加上后缀得到文件名。 $randval = rand(); $imgname = date("YmdHis").substr(md5($randval),0,5).$p_w_picpathinfo[2]; copy($_FILES['upfile']['tmp_name'], $uploadDir.$imgname) or die("move img error!"); echo "Upload succefully.<br>"; ?>
注:1)上面的php文件放到文件夹upp_w_picpath下,同时在php所在文件夹新建文件夹p_w_picpaths_xhr,用于存
放上传的图片;
2)如果不通过ajax上传图片,那么将html页面中的form的action设置为/upp_w_picpath/3g_xhr.php,
提交按钮的type设置为submit,同时将php文件中的注释的那段去掉注释,同时将它后面的代码
注释掉,就可以实现同时提交多个图片。