multiple ajax上传,multiple多图选择，借助FormData通过ajax实现上传

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

var reader = new FileReader();

var filename=files[i].name;

reader.onload =(function(filename){

return function(e){

var obj=document.createElement("tr");

obj.innerHTML="

+" style='vertical-align:bottom;'>"+filename+"

";

imgContainer.appendChild(obj);

};

})(filename);

reader.readAsDataURL(files[i]);

}

}

function getvl(obj){

getPath(obj);

}

function submitImg(){

for(var j=0;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);

}

}

id="upform">

选择图片：

multiple="multiple" οnchange="getvl(this)" />

echo "No. files uploaded : ".count($_FILES['upfile']['name'])."
";

$uploadDir = "images_xhr/";

/**

for ($i = 0; $i < count($_FILES['upfile']['name']); $i++) {

echo "File names : ".$_FILES['upfile']['name'][$i]."
";

$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]."
";

$result = move_uploaded_file($_FILES['upfile']['tmp_name'][$i],$uploadDir . $fPath);

if (strlen($ext) > 0){

echo "Uploaded ". $fPath ." succefully.
";

}

}

echo "Upload complete.
"*/

if($_FILES['upfile']['size'] == 0)

die("alert('请选择您要上传的图片！');history.go(-1);

");

$imageinfo = getimagesize($_FILES['upfile']['tmp_name']);

if($imageinfo[0] > 1200 || $imageinfo[1] > 800)

die("alert('图片大小不符合标准(长1200宽800)！');history.go(-1);");

if($imageinfo[2] < 1 || $imageinfo[2] > 3)

die("alert('图片只能是GIF,JPG,PNG格式！');history.go(-1);");

//$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.
";

?>

注：1)上面的PHP文件放到文件夹upimage下，同时在PHP所在文件夹新建文件夹images_xhr，用于存

2)如果不通过ajax上传图片，那么将html页面中的form的action设置为/upimage/3g_xhr.PHP，

提交按钮的type设置为submit,同时将PHP文件中的注释的那段去掉注释，同时将它后面的代码

注释掉，就可以实现同时提交多个图片。

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。