PHP:pcntl_sigwaitinfo()的用法_PCNTL函數
760
2023-12-15
本文實例講述了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> <div class="wlog"> <div class="wlog_t cf"> <b>寫日志</b> </div> <div class="wlog_c"> <form class="cf" id="myform" target="" enctype="multipart/form-data" action="" method="post"> <div class="wlog_l"> <textarea id="content" name="data[content]"></textarea> <input type="hidden" id="step" value="1" name="data[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"> <h2><b>上傳圖片</b>選擇裝修過程中的照片,每張低于5M,支持JPG/JPEG/PNG格式,最多9張</h2> <div class="wlog_p cf"> <a href="javascript:;" rel="external nofollow" ><img src="http://www.gimoo.net/t/1803/__PUBLIC__/home/images/2016-10-29_231703.png" alt=""><input onchange="submitimg()" type="file" name="thumb"/></a> <div id="addimg"></div> < <b><img src="http://www.gimoo.net/t/1803/__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b> <b><img src="http://www.gimoo.net/t/1803/__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b> <b><img src="http://www.gimoo.net/t/1803/__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b> <b><img src="http://www.gimoo.net/t/1803/__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b> <b><img src="http://www.gimoo.net/t/1803/__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b> <b><img src="http://www.gimoo.net/t/1803/__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b> <b><img src="http://www.gimoo.net/t/1803/__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b> <b><img src="http://www.gimoo.net/t/1803/__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b> --> </div> </div> <div class="wlog_sm"><input type="botton" onclick="return goods_form_submit()" readonly="readonly" value="發布日志"></div> </form> </div> </div> <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='http://www.gimoo.net/t/1803/+dir+path+'><i>x</i><input type="hidden" value="'+path+'" name="thumb['+uid+']"></b>'; $('#addimg').append(html); } </script> <script type="text/javascript" src="http://www.gimoo.net/t/1803/__PUBLIC__/home/js/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="http://www.gimoo.net/t/1803/__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>
控制器(返回被選中的圖片(已經上傳)在服務器之中的路徑):
public function submitimg(){ if(IS_POST){ $data = I('post.data');//獲取post數據 $res = fab_upload($_FILES);//上傳文件 $uid=uniqid(); $res=$res['thumb']; if($res){ echo "<script>parent.callblack_img('{$res}','{$uid}');</script>"; } } }
真正的最后接收表單數據并且存入數據庫的函數:
public function add_journal(){ if(IS_POST){ var_dump($_POST);die; }else{ $this->display(); } }
更多關于PHP相關內容感興趣的讀者可查看本站專題:《php文件操作總結》、《PHP圖形與圖片操作技巧匯總》、《PHP網絡編程技巧總結》、《php面向對象程序設計入門教程》、《php字符串(string)用法總結》、《php+mysql數據庫操作入門教程》及《php常見數據庫操作技巧匯總》
希望本文所述對大家PHP程序設計有所幫助。
#免責聲明#
本站[綠夏技術導航]提供的一切軟件、教程和內容信息僅限用于學習和研究目的;不得將上述內容用于商業或者非法用途,否則,一切后果請用戶自負。本站信息來自網絡收集整理,版權爭議與本站無關。您必須在下載后的24個小時之內,從您的電腦或手機中徹底刪除上述內容。如果您喜歡該程序或內容,請支持正版,購買注冊,得到更好的正版服務。我們非常重視版權問題,如有侵權請郵件[admin@lxwl520.com]與我們聯系進行刪除處理。敬請諒解!