图片上传页面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;
评论(0)