用php+js做了一个简单的多文件上传程序,用js添加div来实现文件域的添加从尔实现多个文件上传,只实现了简单功能,对代码的安全没做考虑,
适合初学者参考,
upload.php
以下为引用的内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>多文件上传--www.phperz.com</title> <style type="text/css"> .main{ width:500px; border:1px solid #999999; height:100%; margin:0 auto; margin-top:100px; padding-left:10px; } .title{ height:25px; text-align:right; padding-right:10px;} </style> <script language="javascript"> function deldiv(divid){ //删除上传框 var div=document.getElementById(divid); div.parentNode.removeChild(div); } function adddiv(){ //添加上传框 var divid=document.getElementById("num").innerHTML; var html="<div style='border:1px solid #cccccc;line-height:25px;'><label>File<input type='file' name='file[]' /></label> <span style='cursor:pointer' onClick='deldiv(\""+divid+"\")'>删除</span></div>" document.getElementById("num").innerHTML=divid+1; var div=document.createElement("DIV"); div.id=divid; document.getElementById("file2").appendChild(div); document.getElementById(divid).innerHTML=html; } </script> </head> <body> <?php if ($_GET["action"]=="load") { //echo $_FILES["file"]["name"]."<br>"; //echo $_FILES["file"]["name"][0]."<br>"; for ($i=0;$i<count($_FILES["file"]["name"]);$i++){ //循环出文件 $filename_arr=explode(".",$_FILES["file"]["name"][$i]); //分割 . 用来得到扩展名 $filename=time()."_".rand(10,30).".".$filename_arr[count($filename_arr)-1]; //选择最后一个点之后的名做为扩展名 //echo $filename; copy($_FILES["file"]["tmp_name"][$i],$filename); // copy到当前目录 echo "OK"; } //print_r($_FILES); } ?> <form action="?action=load" method="post" enctype="multipart/form-data" name="form1" id="form1"> <div class="main"> <div class="title"><span style="cursor:pointer" onClick="adddiv()">添加文件</span></div> <div class="file"> <label>File<input type="file" name="file[]" /></label> </div> <div id="file2"></div> <div><input type="submit" name="Submit" value="提交" /></div> <div id="num" style="display:none">2</div> </div> </form> </body> </html> |
效果图:
可同时上传N个文件.没有对上传的文件的扩展名,或文件大小做判断或文件域是否为空. copy文件时也同样没有对其检查有没有出错,统一输出为"OK"
php上传文件不像asp那么复杂.
重点在于上传多个文件,表单的文件框名称得用 file[] 这种数组的形式.
获取数据时用 $_file["file"]["name"][0] 这种三维数组的形式.
另外添加上传文件域时用了js来添加删除div实现的.
id为num的div每次用js添加div都会用innerHTML更新他的内容,用来做为下一次添加div时 div的id
另外每次上传成功后,也就是刷新upload.php后,文件域都会返回到只有一个文件域的状态.
如果要避免这种情况,可用 count($_file["file"]["name"])的条件,把文件域循环出来.