JS实现多图片上传,无插件,动态生成标签

来源:转载

文件结构:JS文件夹内是jquery库文件,upfile是上传文件存放目录,home.php后台处理代码,index.html是前端页面,说明是我个人的文档,无用



1.此代码适合所有版本jquery库,监听事件的On方法,如果使用Live方法,jquery库要在1.8.3以下,下面是代码

前端页面部分:index.html

<html>
<head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style>
div{margin-bottom:20px;}
</style>
</head>
<body>
<!--file标签部分begin-->
<div id="biaoqian">
<div class="upfile" id="fileup0">文件:<input type="button" value="选择文件" mydb="xuanze0" class="choice"/><span id="tishi"></span><input type="text" name="pdf0" class="txt" size="40" id="pdf0" readonly="readonly"> </div>
</div>
<input type="button" value="添加新文件" id="newfile"/>
<!--file标签部分end-->


<!--隐藏处理文件部分处理begin-->
<div id="chuli">
<div>
<form name="myform0" id="myform0" action="home.php" method="post" enctype="multipart/form-data" target="tarframe">
<input name='potoimg0' type='file' id="xuanze0"  class="wenjian" style="visibility:hidden;position:absolute;top:0px;width:0px"/> 
</form>
<iframe src=""  width="250" height="250" style="display:none;" name="tarframe"></iframe>
</div>
</div>
<!--隐藏处理文件部分处理end-->
<!--文件上传处理end-->
<script>
var $i=1;
var $id;
$(function(){
//添加新的上传按钮
$("#newfile").click(function(){
$newfile = "<div class='upfile' id='fileup"+$i+"'>文件:<input type='button' value='选择文件' mydb='xuanze"+$i+"' class='choice'/><span id='tishi'></span><input type='text' name='pdf"+$i+"' class='txt' size='40' id='pdf"+$i+"' readonly='readonly'> </div>";
$("#biaoqian").append($newfile);
$chuli = "<div><form name='myform"+$i+"' id='myform"+$i+"' action='home.php' method='post' enctype='multipart/form-data' target='tarframe'><input name='potoimg"+$i+"' type='file' id='xuanze"+$i+"'  class='wenjian' style='visibility:hidden;position:absolute;top:0px;width:0px'/> </form><iframe src=''  width='250' height='250' style='display:none;' name='tarframe'></iframe></div>";
$("#chuli").append($chuli);
$i++;
});
$(document).on("click",".choice",function (){
//$('.choice').live("click",function (){
$id = $(this).attr("mydb");
console.log($id);
//$('#'+$id).click();
$('#'+$id).trigger('click');
});
$(document).on("change",".wenjian",function (){
//$(".wenjian").live("change",function(){
console.log("ok");
$form = $(this).parent("form").prop("name");
console.log($form);
document.forms[$form].submit();
});
})
function charu(lei,str){
console.log(lei);
document.getElementById("pdf"+lei).value = str;
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>

后台处理部分:home.php

<?php
//$arrType=array('image/jpg','image/gif','image/png','image/bmp','image/jpeg');
//$max_size='500000';   // 最大文件限制(单位:byte)
$upfile='upfile'; //图片目录路径
//@$file=$_FILES['potoimg'];
$file="";
$lei="";
if(!empty($_FILES['potoimg0'])){
$file = $_FILES['potoimg0'];
$lei =0;
}
if(!empty($_FILES['potoimg1'])){
$file = $_FILES['potoimg1'];
$lei =1;
}
if(!empty($_FILES['potoimg2'])){
$file = $_FILES['potoimg2'];
$lei =2;
}
if(!empty($_FILES['potoimg3'])){
$file = $_FILES['potoimg3'];
$lei =3;
}
if(!empty($_FILES['potoimg4'])){
$file = $_FILES['potoimg4'];
$lei =4;
}


if($_SERVER['REQUEST_METHOD']=='POST'){ //判断提交方式是否为POST
    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'];
$ftype=explode('.',$fname);
$picName=$upfile."/".time().$suijishu.".".$ftype["1"];
   
if(file_exists($picName)){
echo "<font color='#FF0000'>同文件名已存在!</font>";
echo "<script>parent.tishione(4);</script>";
exit;
    }
if(!move_uploaded_file($file['tmp_name'],$picName)){  
echo "<font color='#FF0000'>移动文件出错!</font>";
echo "<script>parent.tishione(5);</script>";
exit;
    }
}
?>
<script>
var db='<?php echo $picName;?>';
var lei = "<?php echo $lei;?>";
parent.charu(lei,db);
</script>

分享给朋友:
您可能感兴趣的文章:
随机阅读: