就像这样的，每选择一个图片就会即时显示出来，附加到右边，也可以随意删除一个元素。
其实是，当type=file的input框框的onchange事件===》》》post数据提交到隐藏的ifram（form表单的target指定）===》》》接收到post数据的直接 echo script标签来返回数据到前端页面并且赋值，然后存储图片路径也是用隐藏域实现：
HTML：
1 <!doctype html>
2 <html lang="cn">
3 <include file="Public/head"/>
4 <body>
5 <include file="Public/nav"/>
6 <iframe name="upload_url" style="display:none"></iframe>
7 <div class="wlog">
8 <div class="wlog_t cf">
9 <b>写日志</b>
10 </div>
11 <div class="wlog_c">
12 <form class="cf" id="myform" target="" enctype="multipart/form-data" action="" method="post">
13 <div class="wlog_l">
14 <textarea id="content" name="data[content]"></textarea>
15 <input type="hidden" id="step" value="1" name="data[step]" />
16 </div>
17 <div class="wlog_r">
18 <h2>选择装修阶段</h2>
19 <b class="cur" mine="1" style="line-height:20px;">准备开工</b>
20 <b mine="2" >水电</b>
21 <b mine="3">泥木</b>
22 <b mine="4">油漆</b>
23 <b mine="5">竣工</b>
24 <b mine="6">软装</b>
25 <!-- <input type="hidden" value="准备开工"> -->
26 </div>
27 <div class="wlog_f cf">
28 <h2><b>上传图片</b>选择装修过程中的照片，每张低于5M，支持JPG/JPEG/PNG格式，最多9张</h2>
29 <div class="wlog_p cf">
30 <a href="javascript:;"><img src="__PUBLIC__/home/images/2016-10-29_231703.png" alt=""><input onchange="submitimg()" type="file" name="thumb"/></a>
31 <div id="addimg"></div>
32
33 <!-- <b><img src="__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b>
34 <b><img src="__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b>
35 <b><img src="__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b>
36 <b><img src="__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b>
37 <b><img src="__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b>
38 <b><img src="__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b>
39 <b><img src="__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b>
40 <b><img src="__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b> -->
41 </div>
42 </div>
43 <div class="wlog_sm"><input type="botton" onclick="return goods_form_submit()" readonly="readonly" value="发布日志"></div>
44 </form>
45 </div>
46 </div>
47
48 <include file="Public/footer"/>
49 <script type="text/javascript">
50 function submitimg(){
51 $("#myform").attr('target','upload_url');
52 $("#myform").attr('action',"{:U('Journal/submitimg')}");
53 $("#myform").submit();
54 }
55
56 function goods_form_submit()
57 {
58 if(!$('#content').val()){
59 alert('请填写日志');
60 return false;
61 }
62
63 $('#myform').attr('target','');
64 $('#myform').attr('action','');
65 $('#myform').submit();
66 }
67
68 function callblack_img(path,uid)
69 { var html="";
70 var dir = "{:C(FILE_PATH)}";
71 var html ='<b><img src='+dir+path+'><i>x</i><input type="hidden" value="'+path+'" name="thumb['+uid+']"></b>';
72 $('#addimg').append(html);
73 }
74 </script>
75
76 <script type="text/javascript" src="__PUBLIC__/home/js/jquery-1.10.1.min.js"></script>
77 <script type="text/javascript" src="__PUBLIC__/home/js/basis.js"></script>
78 <script>
79 $(function(){
80 $('.wlog_r b').click(function(event) {
81 $(this).addClass('cur').siblings('b').removeClass('cur');
82 $('.wlog_r input[type=hidden]').val($(this).text());
83 });
84 $("#addimg").delegate("i","click",function () {
85 $(this).parent("b").remove();
86 })
87 })
88 $("b").click(function(){
89 var value =$(this).attr('mine');
90 $("#step").val(value);
91 })
92 </script>
93 </body>
94 </html>
控制器(返回被选中的图片（已经上传）在服务器之中的路径)：
1 public function submitimg(){
2
3 if(IS_POST){
4 $data = I('post.data');//获取post数据
5 $res = fab_upload($_FILES);//上传文件
6 $uid=uniqid();
7 $res=$res['thumb'];
8 if($res){
9 echo "<script>parent.callblack_img('{$res}','{$uid}');</script>";
10 }
11 }
12 }
真正的最后接收表单数据并且存入数据库的函数：
1 public function add_journal(){
2 if(IS_POST){
3 var_dump($_POST);die;
4 }else{
5 $this->display();
6 }
7
8 }