<!--测试页面-->
<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文件中的注释的那段去掉注释,同时将它后面的代码
注释掉,就可以实现同时提交多个图片。
转载于:https://blog.51cto.com/woodpecker/1352780