這篇文章主要介紹了PHP實作上傳多圖即時顯示與即時刪除的方法,結合實例形式分析了php針對圖片檔案的預覽、上傳及刪除相關操作技巧,需要的朋友可以參考下
本文實例講述了PHP實作上傳多圖即時顯示與即時刪除的方法。分享給大家供大家參考,具體如下:
就像這樣的,每選擇一個圖片就會即時顯示出來,附加到右邊,也可以隨意刪除一個元素。
其實是,當type=file的input框框的onchange事件===》》》post資料提交到隱藏的ifram(form表單的target指定)===》」接收到post資料的直接echo script標籤來返回資料到前端頁面並且賦值,然後儲存圖片路徑也是用隱藏域實現:
HTML:
##
<!doctype html> <html lang="cn"> <include file="Public/head"/> <body> <include file="Public/nav"/> <iframe name="upload_url" style="display:none"></iframe> <p class="wlog"> <p class="wlog_t cf"> <b>写日志</b> </p> <p class="wlog_c"> <form class="cf" id="myform" target="" enctype="multipart/form-data" action="" method="post"> <p class="wlog_l"> <textarea id="content" name="data[content]"></textarea> <input type="hidden" id="step" value="1" name="data[step]" /> </p> <p 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="准备开工"> --> </p> <p class="wlog_f cf"> <h2><b>上传图片</b>选择装修过程中的照片,每张低于5M,支持JPG/JPEG/PNG格式,最多9张</h2> <p class="wlog_p cf"> <a href="javascript:;" rel="external nofollow" ><img src="__PUBLIC__/home/images/2016-10-29_231703.png" alt=""><input onchange="submitimg()" type="file" name="thumb"/></a> <p id="addimg"></p> <!-- <b><img src="__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b> <b><img src="__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b> <b><img src="__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b> <b><img src="__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b> <b><img src="__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b> <b><img src="__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b> <b><img src="__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b> <b><img src="__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b> --> </p> </p> <p class="wlog_sm"><input type="botton" onclick="return goods_form_submit()" readonly="readonly" value="发布日志"></p> </form> </p> </p> <include file="Public/footer"/> <script type="text/javascript"> function submitimg(){ $("#myform").attr('target','upload_url'); $("#myform").attr('action',"{:U('Journal/submitimg')}"); $("#myform").submit(); } function goods_form_submit() { if(!$('#content').val()){ alert('请填写日志'); return false; } $('#myform').attr('target',''); $('#myform').attr('action',''); $('#myform').submit(); } function callblack_img(path,uid) { var html=""; var dir = "{:C(FILE_PATH)}"; var html ='<b><img src='+dir+path+'><i>x</i><input type="hidden" value="'+path+'" name="thumb['+uid+']"></b>'; $('#addimg').append(html); } </script> <script type="text/javascript" src="__PUBLIC__/home/js/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="__PUBLIC__/home/js/basis.js"></script> <script> $(function(){ $('.wlog_r b').click(function(event) { $(this).addClass('cur').siblings('b').removeClass('cur'); $('.wlog_r input[type=hidden]').val($(this).text()); }); $("#addimg").delegate("i","click",function () { $(this).parent("b").remove(); }) }) $("b").click(function(){ var value =$(this).attr('mine'); $("#step").val(value); }) </script> </body> </html>
javascript - 手機wap站h5上傳多圖片功能在UC瀏覽器中無法多選圖片,怎麼解決? 手機wap站h5上傳多圖片功能在UC瀏覽器中無法多選圖片,怎麼解決? 以上是PHP上傳多圖即時顯示與即時刪除的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!public function add_journal(){
if(IS_POST){
var_dump($_POST);die;
}else{
$this->display();
}
}
##相關推薦: