首先是最終的完成效果

這裏是源代碼下載地址 https://pan.baidu.com/s/1eSAQoSy

然後是具體的詳細步驟（圖片為網上參考，代碼是實際寫出效果的代碼；方便引用）：

1.在需要添加圖片的html頁面上引入js，再編寫上傳圖片的代碼塊

這一步和他原來的代碼無異，只是無需寫隱藏的輸入框了，因為每張圖片都需要一個hidden input 記錄id值，所以在第二步中寫到了如何動態添加input

html代碼：

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> 
<script type="text/javascript" src="__STATIC__/myQuery.js"></script>

<div class="controls">
    <label class="item-label">分類圖標</label>
    <input type="file" id="upload_picture">
    <div class="upload-img-box">
        <notempty name="info[‘icon‘]">
            <div class="upload-pre-item"><img src="__ROOT__{$info.icon|get_over=‘path‘}" /></div>
        </notempty>
    </div>
</div>

2.修改uploadPicture函數

這一步就是動態添加圖片到頁面上，並且每添加一張圖片便動態添加一個hidden input節點記錄當前圖片的id值，和為每張圖片加一個刪除按鈕，註意hidden input 的 name 需要加 [ ] ，這樣後臺才接受的到數據，然後前臺修改就結束了

js代碼：

<script type="text/javascript">
    //上傳圖片
    /* 初始化上傳插件 */
    $("#upload_picture").uploadify({
        "height"          : 30,
        "swf"             : "__STATIC__/uploadify/uploadify.swf",
        "fileObjName"     : "download",
        "buttonText"      : "上傳圖片",
        "uploader"        : "{:U(‘File/uploadPicture‘,array(‘session_id‘=>session_id()))}",
        "width"           : 120,
        ‘removeTimeout‘      : 1,
        ‘fileTypeExts‘   : ‘*.jpg; *.png; *.gif;‘,
        "onUploadSuccess" : uploadPicture,
        ‘onFallback‘ : function() {
            alert(‘未檢測到兼容版本的Flash.‘);
        }
    });
    function uploadPicture(file, data){
        var data = $.parseJSON(data);
        var src = ‘‘;
        if(data.status){
            $_img_path = $("<input type=‘hidden‘ name=‘icon[]‘ class=‘icon‘ value=‘‘ />");
            $_img_path.val(data.path);
            $(‘#tab1‘).append($_img_path);
            src = ‘__ROOT__‘ + data.path;
            $_upload_img = $("<img src=" + src +" title=‘點擊顯示大圖‘>");
            $_img_del = $("<span class=‘btn-close‘ title=‘刪除圖片‘></span>>");
            $_upload_item = $("<div class=‘upload-pre-item‘></div>");
            $_upload_item.append($_upload_img);
            $_upload_item.append($_img_del);
            $(‘.upload-img-box‘).append($_upload_item);
        } else {
          alert(data.msg)
        }
    }
</script>

3.修改common.css

對自己添加的刪除按鈕添加樣式 ，並且限制彈出框中圖片的大小

如果刪除按鈕未顯示，查看背景圖片路徑是否正確：

background: url(../Admin/images/blue_color/bg_icon.png)；

background: url(../images/blue_color/bg_icon.png)

以下可下載---------------------------------------------------------------------

4.修改common.js（Public->Admin->js->common.js）

原上傳圖片後點擊縮略圖整行都可以顯示大圖，修改後只有點擊縮略圖時才能查看大圖，所以用$(document).delegate為還未存在的縮略圖添加事件，然後在$(“.upload-img-popup”)裏直接添加本縮略圖的復制節點就ok，原來的寫法會導致刪除圖片的按鈕也一並添加到了彈出框中。

5.自寫myQuery.js

這一步的目的是給刪除按鈕添加事件，刪除選擇的圖片和該圖片對應的hidden input。?這樣就完成了顯示上傳的多張圖片，並且可以多次添加圖片。

6.後臺使用 I(‘post.icon’)操作來直接獲得icon數據，返回數據為所有圖片的id

tp5多圖上傳