前台文件代码
upload.html
<!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>产品细节图多图上传示例代码 无刷新</title> <style> .filepath{width:300px;} .uploadinfo{color:#009900;} </style> <script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script type="text/javascript"> function process(v){ if(v=="inform"){ document.addimgform.action="do_upload.php"; $("form").attr("target","fileUp"); } document.addimgform.submit(); } $(document).ready(function(){ //////////////////// $('#add_gallery').click(function(){ $("#gallery").append('<div class="addinput"><a href="javascript:;" class="remove_gallery">[-]</a> <input name="filepath[]" id="textpath" class="textpath" type="text" value="" /> <input type="file" name="img_gallery[]" id="img_gallery" class="filepath" /> <span class="spanimg"></span></div>'); }); //////////////////// $(document).on("click",".remove_gallery",function(){$(this).parent(".addinput").remove();}); //////////////////// $(document).on("change",".filepath",function(){ var route=$(this).val(); $(this).parents(".addinput").find(".textpath").val(route); }); //////////////////// $(document).on("click",".delimg",function(){ id = $(this).attr("rel"); url = $(this).attr("rev"); path = $(this).attr("rep"); name = $(this).parents(".addinput").find(".filepath").val(); $.post ( "do_upload.php", {imgid:id,imgurl:url,imgpath:path}, function(){ alert('图片 '+name+' 已删除！'); }, "html" ); $(this).parents(".addinput").remove(); }); //////////////////// }); </script> </head> <body> <!--<form id="addimgform" name="addimgform" target="fileUp" enctype="multipart/form-data" action="do_upload.php" method="post">--> <form id="addimgform" name="addimgform" enctype="multipart/form-data" action="product.php" method="post"> <fieldset> <legend>产品上传</legend> 产品名：<input name="proname" type="text" value="" /><br /><br /> 价 格：<input name="price" type="text" value="" /><br /><br /> <fieldset> <legend>图片上传</legend> <div id="gallery"> <div class="addinput"><a href="javascript:;" class="remove_gallery">[-]</a> <input name="filepath[]" id="textpath" class="textpath" type="text" value="" /> <input type="file" name="img_gallery[]" id="img_gallery" class="filepath" /> <span class="spanimg"></span></div> </div> <a href="javascript:;" id="add_gallery">[+]</a> <input name="upimg" type="submit" value="上传" id="upimg" onclick="process('inform')"> <span class="uploadinfo"></span> </fieldset> <iframe style="border:0px;" width="0px" height="0px" name="fileUp"></iframe> <script> function notice_success(i,url,path,info){ $("#gallery .textpath").eq(i).val(url); $("#gallery .spanimg").eq(i).html(info+'<img src="'+url+'" style="60px; height:60px;" align="absmiddle" /> <a class="delimg" href="javascript:;" rel="'+i+'" rev="'+url+'" rep="'+path+'">删除</a> '); } function notice_failure(info){ $("#gallery .spanimg").eq(i).html(info); } </script> <input name="submit" type="submit" value="提交" id="submit"> </fieldset> </form> </body> </html>
后台文件代码
do_upload.php
<?php $basedir = dirname(__FILE__).'/'.date('Y-m-d'); $new_folder = str_replace('\','/',$basedir); if(file_exists($new_folder)){ //echo 'exists'; }else{ mkdir($new_folder, 0777); } ?> <?php if (isset($_POST['imgid']) && isset($_POST['imgurl']) && isset($_POST['imgpath'])){ if(file_exists($_POST['imgpath'])){ $thepath = str_replace('/','\',$_POST['imgpath']); unlink($thepath); }else{ echo '未找到相关文件'; } } if(!empty($_FILES)){ for ($i=0;$i<count($_FILES['img_gallery']['tmp_name']);$i++){ //$file_name = iconv('utf-8', 'gb2312', $_FILES['img_gallery']['name']);//在utf8编码下可以防止中文乱码 $upfile = $new_folder."/".$_FILES['img_gallery']['name'][$i];//此处路径换成你的 $imgpath = 'http://'.$_SERVER['SERVER_NAME'].'/images/'.date('Y-m-d').'/'.$_FILES['img_gallery']['name'][$i];//上传后的图片url if(move_uploaded_file($_FILES['img_gallery']['tmp_name'][$i],$upfile)){ //echo "第".($i+1)."张图片上传成功<br>"; $info = "第".($i+1)."张图片上传成功！ "; //此处进行数据库操作 ?> <script>parent.notice_success('<?php echo $i;?>','<?php echo $imgpath;?>','<?php echo $upfile;?>','<?php echo $info;?>');</script> <?php @unlink($_FILES["img_gallery"]["tmp_name"][$i]); } else{ $info = "第".($i+1)."张图片上传不成功！ "; ?> <script>parent.notice_failure('<?php echo $info;?>');</script> <?php } } } ?>
打完收工！