JS实现多图片上传，无插件，动态生成标签
2017-01-22 16:04
609 查看
文件结构：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>
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery插件ImageDrawer.js实现动态绘制图片动画（附源码下载）
- ajaxfileupload.js插件实现图片无刷新上传
- jQuery插件ImageDrawer.js实现动态绘制图片动画（附源码下载）
- 图片上传插件ImgUploadJS：用HTML5 File API 实现截图粘贴上传、拖拽上传
- 图片上传插件ImgUploadJS：用HTML5 File API 实现截图粘贴上传、拖拽上传
- 动态生成二维码图片后通过js(JavaScript)或jq实现网页图片转base64格式下载
- node.js+express 实现CSDN上传头像功能 (包含图片的缩放，生成头像缩略图)
- js+插件实现代码复制及动态生成二维码扫描、分享到朋友圈QQ空间功能
- 用js动态的改变img标签里面的src属性实现图片的循环切换
- 利用字节流将生成的图片输出到js页面,实现动态生成图片
- 通过修改ajaxFileUpload.js实现多图片动态上传并实现预览
- JS实现的图片预览插件与用法示例【不上传图片】
- 【原创】C#+JS 实现动态增减图片上传框
- JS实现动态添加图片上传，多个单图添加
- JS实现图片上传前预览
- js实现上传时图片的预览
- 利用Jquery的cropper插件实现拖动层动态头剪切(裁剪头像)图片
- JS实现动态图片展示效果
- JS实现图片上传前预览 [转改]
- neatbeans用js实现图片预览上传(自动控制图片大小)