头像

php利用iframe实现无刷新多图上传

来源:https://www.daimasucai.com/share/20.html 2017-07-26浏览(10)  评论0

图片上传页面index.html

<!doctype html>
<body>
<style>
#addimg { float:left}
#addimg div{ width:86px; height:86px; display:block; float:left; overflow:hidden; margin:6px; position:relative; margin-top:0}
#addimg div img{ width:86px; height:86px; }
#addimg div i{ position:absolute; top:5px; right:2px; }
#addimg div i img{ width:20px; height:20px; cursor:pointer}
.cur{ border:#FF9933 solid 1px; color:#FF9933}
 
    .fileInputContainer{  
        height:86px;  
        background:url(up.jpg);  
        position:relative;  
        width: 86px; float:left; margin-right:5px
    }
  
    .fileInput{  
        height:86px;  width: 86px; 
        font-size: 10px;  
        position:absolute;  
        right:0;  
        top:0;  
        opacity: 0;  
        filter:alpha(opacity=0);  
        cursor:pointer;  
    } 
.wlog_f{ color:#666; font-size:12px} 
textarea{display:block; width:708px; height:78px; padding:10px 20px; background:url(../input3/images/facebg_1.png) 0px 0px repeat-x; border:1px solid #cacaca; outline:none; position:relative; overflow:hidden;resize: none;}
.wlog_sm{ clear:both; padding-top:30px}
.wlog_sm input{ background-color:#CCCCCC; border:0; height:35px; width:80px; text-align:center; cursor:pointer} 
.wlog_sm input:hover{ background-color:#FF9933}
</style>  
<iframe name="upload_url" style="display:none"></iframe>
   <div class="wlog">
     <div class="wlog_t cf">
       <h2>写日志</h2>
     </div>
 
     <div class="wlog_c">
       <form class="cf" id="myform" target="" enctype="multipart/form-data" action="" method="post">
         <div class="wlog_l">
 <div id="Smohan_FaceBox">
           <textarea id="content" name="content"></textarea>
    
           <input type="hidden" id="step" value="1" name="step" />
         </div>
         <div class="wlog_r">
           <h2>选择装修阶段</h2>
           <b class="cur" mine="1" style="line-height:20px;">准备开工</b>
           <b mine="2" >水电</b>
           <b mine="3">泥木</b>
           <b mine="4">油漆</b>
           <b mine="5">竣工</b>
           <b mine="6">软装</b>
           <!-- <input type="hidden" value="准备开工"> -->
         </div>
         <div class="wlog_f cf">
           <h4><b>上传图片</b>选择装修过程中的照片,每张低于512KB,支持JPG/JPEG/PNG/GIF格式,最多4张,已经上传<B id="numpicup">0</B>张。</h4>
           <div class="wlog_p cf">
<div class="fileInputContainer">  
    <a><input class="fileInput" type="file" name="thumb" onChange="submitimg()"/></a>  
</div>  
             <div id="addimg">
 <div><img src="./upload/img1501039244.jpg"><i><img src="d.png"></i><input type="hidden" value="upload/img1501039244.jpg" name="thumb[]"></div>
 <div><img src="./upload/img1501039244.jpg"><i><img src="d.png"></i><input type="hidden" value="upload/img1501039244.jpg" name="thumb[]"></div>
 <div><img src="./upload/img1501039244.jpg"><i><img src="d.png"></i><input type="hidden" value="upload/img1501039244.jpg" name="thumb[]"></div>
 </div>
           
           </div>
         </div>
         <div class="wlog_sm">
 <input type="botton" onClick="return goods_form_submit()" readonly="readonly" value="发布日志">
 </div>
       </form>
     </div>
   </div>
  <script type="text/javascript">
 // var hello = 'helloa';
  function submitimg(){
var imgnum= $("#addimg").children('div').length;
//alert(imgnum);
$("#numpicup").html(imgnum+1);
   if(imgnum>3){
   alert('最多上传4个');
   var newimgnum= $("#numpicup").text();
   $("#numpicup").html(newimgnum-1);
   return false;
   }else{
   
$("#myform").attr('target','upload_url');
$("#myform").attr('action',"a.php");
//alert();
$("#myform").submit();
}
  }
  function goods_form_submit(){
     if(!$('#content').val()){
      alert('请填写日志');
      return false;
    }
    $('#myform').attr('target','');
    $('#myform').attr('action','b.php');
    $('#myform').submit();
  }
  
  function callblack_img(path,uid){ 
 // alert(path);  alert(uid);
  
   var html="";
    var dir = "./";
  //  var html ='<div><img src='+dir+path+'><i><img src="d.png"></i><input type="hidden" value="'+path+'" name="thumb['+uid+']"></div>';
 var html ='<div><img src='+dir+path+'><i><img src="d.png"></i><input type="hidden" value="'+path+'" name="thumb[]"></div>';
    $('#addimg').append(html);
  }
  </script>
  <script type="text/javascript" src="jquery.js"></script>
  <script>
  $(function(){
  
  var imgnuma= $("#addimg").children('div').length;
//alert(imgnum);
$("#numpicup").html(imgnuma);
  // $('#myform').attr('action','b.php');
    $('.wlog_r b').click(function(event) {
      $(this).addClass('cur').siblings('b').removeClass('cur');
      $('.wlog_r input[type=text]').val($(this).text());
    });
    $("#addimg").delegate("i","click",function () {
      $(this).parent("div").remove();
   var delimglj=$(this).nextAll('input[type="hidden"]').val();
  //删除图片
   var path='./';
   $.get(
path+'delpic.php',
{action:"del", filename:delimglj},
function(){}
);
 //统计图片个数
   var newimgnum= $("#numpicup").text();
   $("#numpicup").html(newimgnum-1);
    })
  })
    $("b").click(function(){
      var value =$(this).attr('mine');
      $("#step").val(value);
    })
  </script>
</body>
</html>
a.php
$uptypes = array( 
'image/jpg', 
'image/jpeg', 
'image/png', 
'image/pjpeg', 
'image/gif', 
'image/bmp', 
'image/x-png' 
);


$file = $_FILES["thumb"]; 
$fname = $_FILES["thumb"]["name"]; 
$fname_array = explode('.',$fname); 
$extend = $fname_array[count($fname_array)-1]; 
$MAX_FILE_SIZE = 512000; 
//文件当前位置创建upload文件夹,若要在上一层目录创建则为"../upload/"; 
$lujing=date('Ymd');
$dest_folder = "upload/".$lujing."/"; 
if($extend!=""){ 
if(!in_array($file["type"],$uptypes)){ 
echo "<script>alert('只能上传图片文件!');</script>"; 
exit; 
} 
if($file["size"]>$MAX_FILE_SIZE){ 
echo "<script>alert('图片大小不能超过512KB!');</script>"; 
exit; 
} 
if(!file_exists($dest_folder)){ 
mkdir($dest_folder); 
} 
$randval = date('YmdHis').rand(); 
$uploadfile = $dest_folder.$randval.'.'.$extend; 
//echo 'uploadfile: '.$uploadfile ; 
if(move_uploaded_file($_FILES["thumb"]["tmp_name"],$uploadfile)){ 
echo"<script>parent.callblack_img('".$uploadfile."',235);</script>";
}else{ 
echo "<script>alert('图片上传失败!');</script>"; 
} 
}

 

b.php代码

<?php 
$step= $_POST['step']; 
$content= $_POST['content'];
echo $step."<br>"; 
echo $content."<br>"; 
$thumb_arr = $_POST['thumb']; 
 print_r($thumb_arr);
$imglist="";
echo "您选定图片为: "; 
$c=implode(",",$thumb_arr);
echo $c;


声明:本文为原创文章,如需转载,请注明来源daimasucai.com并保留原文链接:https://www.daimasucai.com/share/20.html

评论(0)


温馨提示:为规范评论内容,垃圾评论一律封号...

后面还有条评论,点击查看>>