html5 multiple="multiple" 属性多图片单file标签上传无插件

来源：互联网发布：淘宝搜不到网盘会员编辑：程序博客网时间：2024/06/13 11:34

文件目录：

JS文件夹是JQUERY库，upfile是上传文件目录，one_file.html是上传页，one_home.php是处理页面

前端页面：one_file.html

<html>
<head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style>
div{margin-bottom:20px;}
</style>
</head>
<body>

<div id="biaoqian">
<div class="upfile" id="fileup0">文件：<input type="button" value="选择文件" mydb="xuanze0" class="choice"/><span id="tishi"></span><input type="hidden" name="pdf0" class="txt" size="40" id="pdf0" > </div>
</div>



<div id="chuli">
<div>
<form name="myform0" id="myform0" action="one_home.php" method="post" enctype="multipart/form-data" target="tarframe">
<input name='potoimg0[]' type='file' id="xuanze0" class="wenjian" style="position:absolute;top:0px;width:0px" multiple="multiple"/>
</form>
<iframe src="" width="1000" height="1000" style="display:none;" name="tarframe"></iframe>
</div>
</div>


<script>
$(function(){
$('.choice').click(function (){
$('#xuanze0').trigger('click');
});
$("#xuanze0").change(function(){
document.forms["myform0"].submit();
});
})
var zifu="";
function charu(str){
for(x in str){
zifu+="<div><img src='"+str[x]+"'/></div>";
console.log(str[x]);
}
//console.log(zifu[0]);
//document.getElementById("pdf0").value = str;
$("#biaoqian").append(zifu);
document.getElementById("tishi").innerHTML = "";
}
function tishione(par){
switch (par){
case 1:
document.getElementById("tishi").innerHTML = "文件不存在";
break;
case 2:
document.getElementById("tishi").innerHTML = "上传文件太大";
break;
case 3:
document.getElementById("tishi").innerHTML = "上传文件格式不对";
break;
case 4:
document.getElementById("tishi").innerHTML = "同名文件已存在";
break;
case 5:
document.getElementById("tishi").innerHTML = "移动文件出错！";
break;
}
}
</script>
</body>
</html>

后台处理页面：one_home.php

<?php
//$arrType=array('image/jpg','image/gif','image/png','image/bmp','image/jpeg');
//$max_size='500000'; // 最大文件限制（单位：byte）
$upfile='upfile'; //图片目录路径
//@$file=$_FILES['potoimg0'];
//@$file=$_FILES;
$file=$_FILES['potoimg0'];
//exit;
$pic=array();
if($_SERVER['REQUEST_METHOD']=='POST'){ //判断提交方式是否为POST
for($i=0;$i<count($file["name"]);$i++){
if(!is_uploaded_file($file['tmp_name'][$i])){ //判断上传文件是否存在
//if(!is_uploaded_file($file['tmp_name'])){ //判断上传文件是否存在
echo "<font color='#FF0000'>文件不存在！</font>";
echo "<script>parent.tishione(1);</script>";
exit;
}
if(!file_exists($upfile)){ // 判断存放文件目录是否存在
mkdir($upfile,0777,true);
}

$suijishu=rand(999,9999);
//$imageSize=getimagesize($file['tmp_name']);//得到图片的属性
//$img=$imageSize[0].'*'.$imageSize[1];//图片的宽X高
$fname=$file['name'][$i];
//$fname=$file['name'];
$ftype=explode('.',$fname);
//$picName[$i]=$upfile."/".time().$suijishu.".".$ftype["1"];
$picName=$upfile."/".time().$suijishu.".".$ftype["1"];
//var_dump($picName);
if(file_exists($picName[$i])){
echo "<font color='#FF0000'>同文件名已存在！</font>";
echo "<script>parent.tishione(4);</script>";
exit;
}
if(!move_uploaded_file($file['tmp_name'][$i],$picName)){
//if(!move_uploaded_file($file['tmp_name'],$picName)){
echo "<font color='#FF0000'>移动文件出错！</font>";
echo "<script>parent.tishione(5);</script>";
exit;
}
//$pic.=$picName.",";
$pic[]=$picName;
}
}
var_dump($pic);
?>
<script>
var db=<?php echo json_encode($pic);?>;
parent.charu(db);
</script>

0 0

html5 multiple="multiple" 属性 多图片单file标签上传无插件

html5 multiple="multiple" 属性多图片单file标签上传无插件