當(dāng)type=file的input框框的onchange事件===》》》post數(shù)據(jù)提交到隱藏的ifram（form表單的target指定）===》》》接收到post數(shù)據(jù)的直接 echo script標(biāo)簽來返回數(shù)據(jù)到前端頁面并且賦值，然后存儲圖片路徑也是用隱藏域?qū)崿F(xiàn)： HTML：<!doctype html>
<html>
<include file="Public/head"/>
<body>
<include file="Public/nav"/>
<iframe name="upload_url" style="display:none"></iframe>
<div>
<div class="wlog_t cf">
<b>寫日志</b>
</div>
<div>
<form id="myform" target="" enctype="multipart/form-data" action="" method="post">
<div>
<textarea id="content" name="data[content]"></textarea>
<input type="hidden" id="step" value="1" name="data[step]" />
</div>
<div>
<h2>選擇裝修階段</h2>
<b mine="1" style="line-height:20px;">準(zhǔn)備開工</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="準(zhǔn)備開工"> -->
</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="__PUBLIC__/home/images/2016-10-29_231703.png" alt=""><input onchange="submitimg()" type="file" name="thumb"/></a>
<div id="addimg"></div>
<!-- <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> -->
</div>
</div>
<div><input type="botton" onclick="return goods_form_submit()" readonly="readonly" value="發(fā)布日志"></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('請?zhí)顚懭罩?#39;);
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>控制器(返回被選中的圖片（已經(jīng)上傳）在服務(wù)器之中的路徑)： public function submitimg(){
if(IS_POST){
$data = I('post.data');//獲取post數(shù)據(jù)
$res = fab_upload($_FILES);//上傳文件
$uid=uniqid();
$res=$res['thumb'];
if($res){
echo "<script>parent.callblack_img('{$res}','{$uid}');</script>";
}
}
}真正的最后接收表單數(shù)據(jù)并且存入數(shù)據(jù)庫的函數(shù)： public function add_journal(){
if(IS_POST){
var_dump($_POST);die;
}else{
$this->display();
}
} |
免責(zé)聲明：本站部分文章和圖片均來自用戶投稿和網(wǎng)絡(luò)收集，旨在傳播知識，文章和圖片版權(quán)歸原作者及原出處所有，僅供學(xué)習(xí)與參考，請勿用于商業(yè)用途，如果損害了您的權(quán)利，請聯(lián)系我們及時修正或刪除。謝謝！
始終以前瞻性的眼光聚焦站長、創(chuàng)業(yè)、互聯(lián)網(wǎng)等領(lǐng)域，為您提供最新最全的互聯(lián)網(wǎng)資訊，幫助站長轉(zhuǎn)型升級，為互聯(lián)網(wǎng)創(chuàng)業(yè)者提供更加優(yōu)質(zhì)的創(chuàng)業(yè)信息和品牌營銷服務(wù)，與站長一起進(jìn)步！讓互聯(lián)網(wǎng)創(chuàng)業(yè)者不再孤獨！
掃一掃，關(guān)注站長網(wǎng)微信
大家都在看
