自定義圖片追加插件實現圖片動態追加（一般電商的商品列使用）

前情說明：自己寫的這個插件方式比較老套，主要是快速構建：圖片上傳是同表單提交一起提交，必須要引入layer

效果：

先上css代碼：

.my-ui-img-div{
    display: inline-block;
    margin-left: 10px;
    margin-top:5px;
    border:1px solid #96c2f1;
    background:#eff7ff;
    border-radius:5px;
}
.my-ui-img-div .my-ui-img-file{
    display: none;
}
.img-circle.my-ui-img{
    width: 60px;
    height: 60px;
}

因爲用了bootstrap,所以用了bootstrap的屬性：上面的img-circle就是，表示圖片設置爲圓形，如果沒用的話，就用border-radius:5px;自己調整，同時後面用到的js裏面這一塊也要自己修改

在上html代碼：

<!--追加圖片列表樣例,用在添加時-->
<div class="form-group">
        <label class="col-sm-3 control-label">畫廊圖片：</label>
        <div class="col-sm-8">
               <div id="galleryDiv">
                   <div id="div_0" class="my-ui-img-div">
                       <input type="file" id="file_0" class="my-ui-img-file" onchange="replace_file_img('galleryDiv','div_','file_','files','img_',0)">
                       <a href="javascript:;"><img th:src="@{/img/img-add.png}" class="img-circle my-ui-img" id="img_0" onclick="click_file_img('file_',0)"></a>
                   </div>
               </div>
        </div>
</div>

說明一下：有兩個方法：

replace_file_img('galleryDiv','div_','file_','files','img_',0)"

這個方法傳入參數什麼意思呢，div的id爲galleryDiv這個裏面的所有內容是一個整體

下面說下參數意思：

第一個參數：這個整體的div最外層div的id值，記住，該div內部的所有元素的id值都是前綴加索引的形式，建議索引從0開始

第二個參數：內部第二個div的前綴

第三個參數：隱藏的file文件id的前綴

第四各參數：這一組file文件統一的file的name屬性值，因爲是動態的，所以需要自己指定

第五個參數：顯示圖片id的前綴

第六個參數：所有元素的起始索引值

click_file_img('file_',0)"

這個方法更簡單了，只需要傳入file文件id的前綴和統一開始索引

因爲用到了圖片，所以圖片如下：

 

js代碼如下：

//保存刪除圖片個數的全局對象
var deleteObj = {deleteName:[],deleteNumber:[]};

//點擊圖片觸發文件選擇
function click_file_img(filePref,index) {
    $("#"+filePref+index).click();
}

/**
 * 替換圖片,divId：最外層div的id值
 * divPref，第二層div的id數值的前綴
 * filePref：file輸入框id的數值前綴
 * fileName: 向後臺傳輸的file文件的統一命名
 * imgPref：圖片索引的前綴
 * index：統一的索引值，建議從0開始，name上面那些id的命名要遵循  前綴+索引  ，例如file_0,img_0
 * imgName:這個參數不用管，不用傳遞這個參數值
 */
function replace_file_img(divId,divPref,filePref,fileName,imgPref,index,imgName) {
    if(deleteObj.deleteName.indexOf(divId) === -1){
        deleteObj.deleteName.push(divId);
        deleteObj.deleteNumber.push(0);
    }
    var deleteIndex = deleteObj.deleteName.indexOf(divId);
    var deleteNumber = deleteObj.deleteNumber[deleteIndex];

    var length = $("#"+divId+" :file").length;//得到該部分文件的個數

    var blob_img = $("#"+filePref+index)[0].files[0];
    console.log(blob_img);
    if((blob_img.type).indexOf("image/") === -1){
        if(length === 1 || ((index+1-deleteNumber) === length)){
            layer.msg("請選擇圖片");
        }else{
            layer.msg("請選擇圖片,因不是圖片，所以該部分文件將被刪除");
            setTimeout(function(){
                $("#"+divPref+index).remove();
                deleteNumber++;
                deleteObj.deleteNumber.splice(deleteIndex,1,deleteNumber);
            },2000);
        }
        $("#"+filePref+index).attr("name","");//清空最後一個選擇圖標的name，不傳往後臺
        return;
    }

    if($("#"+imgName+index).length > 0) {//判斷隱藏域參數是否存在，存在就修改爲false,表示不存在
        var imgUrlDataUrl = $("#"+imgName+index).val();
        var imgUrlData = JSON.parse(imgUrlDataUrl);
        $("#"+imgName+index).val('["'+imgUrlData[0]+'","false"]');
        $("#"+filePref+index).attr("name",fileName);//修改name值
    }

    var url = window.URL.createObjectURL(blob_img);
    //替換url圖片url
    $("#"+imgPref+index).attr("src",url);

    if((index+1-deleteNumber) === length){
        $("#"+filePref+index).attr("name",fileName);//修改name值，因爲在添加新的file是要講之前的name值加上
        add_file_img(divId,divPref,filePref,fileName,imgPref,index);
        var elem = '<a href="javascript:;" onclick="img_file_delete(\''+divId+'\',\''+divPref+'\','+(index)+')" onmouseover="OverHint(this)" onmouseout="OutHint()">' +
            '<img src="'+ctx+'img/img_remove.png" style="width: 20px;;position: relative;left: 0px;top:20px">' +
            '</a>';
        $("#"+imgPref+index).after(elem);

    }

}
function add_file_img(divId,divPref,filePref,fileName,imgPref,index) {
    var elem1 = '<div id="'+divPref+(index+1)+'"style="display: inline-block;margin-left: 10px;margin-top:5px;border:1px solid #96c2f1;background:#eff7ff;border-radius:5px">';
    var elem2 = '<input type="file" id="'+filePref+(index+1)+'" style="display: none" onchange="replace_file_img(\''+divId+'\',\''+divPref+'\',\''+filePref+'\',\''+fileName+'\',\''+imgPref+'\','+(index+1)+')">';
    var elem3 = '<a href="javascript:;"><img src="'+ctx+'img/img-add.png" class="img-circle" id="'+imgPref+(index+1)+'" style="width: 60px;height: 60px" onclick="click_file_img(\''+filePref+'\','+(index+1)+')"></a>';
    var elem4 = '</div>';
    $("#"+divPref+index).after(elem1+elem2+elem3+elem4);
}

/**
 * 刪除圖片及文件
 * @param divId 最外層div的id名字
 * @param divPref 第二層div的id數值的前綴
 * @param index 統一的索引值，建議從0開始，name上面那些id的命名要遵循  前綴+索引  ，例如file_0,img_0
 */
function img_file_delete(divId,divPref,index,imgName,fileName) {
    var length = $("#"+divId+" :file").length;
    var deleteIndex = deleteObj.deleteName.indexOf(divId);
    var deleteNumber = deleteObj.deleteNumber[deleteIndex];
    if((index+1-deleteNumber) != length){

        if($("#"+imgName+index).length > 0) {//判斷隱藏域參數是否存在，存在就修改爲false,表示不存在
            var imgUrlDataUrl = $("#"+imgName+index).val();
            var imgUrlData = JSON.parse(imgUrlDataUrl);
            $("#"+imgName+index).val('["'+imgUrlData[0]+'","false"]');
            // $("#"+filePref+index).attr("name",fileName);//修改name值
        }

        $("#"+divPref+index).remove();
        deleteNumber ++;
        deleteObj.deleteNumber.splice(deleteIndex,1,deleteNumber);
        layer.close(tip_index);
    }
}
var tip_index;
function OverHint(obj) {
    var that = obj;
    tip_index = layer.tips('刪除', that,{
        tips : [ 1, '#00C9BA' ],
        time : 4000
    });
}
function OutHint(obj) {
    layer.close(tip_index);
}

/**
 * 在做修改時動態追擊數據
 * @param imgList 後臺得到的圖片列表數組
 * @param imgName 數據庫對應img字段對應的【用來接收數據集合的屬性名】
 * @param divId 最外層div的id值
 * @param divPref 第二層div的id值的前綴名，不包括數字索引  這種格式爲：前綴+索引  ，例如file_0,img_0
 * @param filePref input文件框的id值的前綴名
 * @param fileName 要向後臺傳輸的file的統一命名
 * @param imgPref img標籤id的不包括索引值的前綴
 */
function appendImgListOnUpdate(imgList,imgName,divId,divPref,filePref,fileName,imgPref){
    console.log("加載更新包；e");
    var endIndex = 0;
    if(imgList != null && imgList.length != 0){
        imgList.forEach(function (currentValue, index, arr) {
            console.log(currentValue);
            var elem0 = '<input type="hidden" id="'+imgName+index+'" name="'+imgName+'" value=\'["'+currentValue+'","true"]\'>';
            var elem1 = '<div id="'+divPref+(index)+'"style="display: inline-block;margin-left: 10px;margin-top:5px;border:1px solid #96c2f1;background:#eff7ff;border-radius:5px">';
            var elem2 = '<input type="file" id="'+filePref+(index)+'" style="display: none" onchange="replace_file_img(\''+divId+'\',\''+divPref+'\',\''+filePref+'\',\''+fileName+'\',\''+imgPref+'\','+(index)+',\''+imgName+'\')">';
            var elem3 = '<a href="javascript:;"><img src="'+currentValue+'" class="img-circle" id="'+imgPref+(index)+'" style="width: 60px;height: 60px" onclick="click_file_img(\''+filePref+'\','+(index)+')"></a>';
            var elem4 = '</div>';
            var elem = '<a href="javascript:;" onclick="img_file_delete(\''+divId+'\',\''+divPref+'\','+(index)+',\''+imgName+'\',\''+fileName+'\')" onmouseover="OverHint(this)" onmouseout="OutHint()">' +
                '<img src="'+ctx+'img/img_remove.png" style="width: 20px;;position: relative;left: 0px;top:20px">' +
                '</a>';
            if(index === 0){
                $("#"+divId).append(elem0+elem1+elem2+elem3+elem4);
                $("#"+imgPref+index).after(elem);
                endIndex ++;
            }else {
                $("#"+divPref+(index-1)).after(elem0+elem1+elem2+elem3+elem4);
                $("#"+imgPref+index).after(elem);
                endIndex ++;
            }
        })
    }

    var elem1 = '<div id="'+divPref+(endIndex)+'"style="display: inline-block;margin-left: 10px;margin-top:5px;border:1px solid #96c2f1;background:#eff7ff;border-radius:5px">';
    var elem2 = '<input type="file" id="'+filePref+(endIndex)+'" style="display: none" onchange="replace_file_img(\''+divId+'\',\''+divPref+'\',\''+filePref+'\',\''+fileName+'\',\''+imgPref+'\','+(endIndex)+')">';
    var elem3 = '<a href="javascript:;"><img src="'+ctx+'img/img-add.png" class="img-circle" id="'+imgPref+(endIndex)+'" style="width: 60px;height: 60px" onclick="click_file_img(\''+filePref+'\','+(endIndex)+')"></a>';
    var elem4 = '</div>';
    if(endIndex === 0){
        $("#"+divId).append(elem1+elem2+elem3+elem4);
    }else {
        $("#"+divPref+(endIndex-1)).after(elem1+elem2+elem3+elem4);
    }
}

說明一下：因爲我沒有直接寫css引用class,所以你看到這裏面追加的樣式也在裏面；所以你需要把裏面的圖片地址換一下，也就是上面兩張圖片的地址

 

以上是做增加的時候：

那麼做修改呢，因爲要將圖片顯示出來，刪除也要做處理

所以修改時html代碼：

<!--修改時樣例，調用下方方法-->
<div class="form-group">
       <label class="col-sm-3 control-label">畫廊圖片：</label>
       <div class="col-sm-8">
               <div id="galleryDiv">
               </div>
       </div>
</div>

是不是感覺更簡單了

上面的js是通用的，引入就行了，但是你自己必須調用一個函數，見代碼

<script type="text/javascript" th:inline="javascript">
    var imgsList =[[${imgsList}]];//假設這是從後臺查出來放在model中的數據，那麼用這種方式可以拿到，取出圖片列表數組數據，調用下方方法

    //模擬數據，圖片畫廊做修改時，點開方法可以查看傳輸值的含義，可以對照添加時的標籤結構理解
    var imgList = ["http://pic37.nipic.com/20140113/8800276_184927469000_2.png","http://pic40.nipic.com/20140331/9469669_142840860000_2.jpg"];
    appendImgListOnUpdate(imgList,'imgName','galleryDiv','div_','file_','files','img_');

</script>

看出來了吧，只需要調用appendImgListOnUpdate()方法即可：

* 在做修改時動態追擊數據
* @param1 imgList 後臺得到的圖片列表數組
* @param2 imgName 數據庫對應img字段對應的【用來接收數據集合的屬性名】
* @param3 divId 最外層div的id值
* @param4 divPref 第二層div的id值的前綴名，不包括數字索引  這種格式爲：前綴+索引  ，例如file_0,img_0
* @param5 filePref input文件框的id值的前綴名
* @param6 fileName 要向後臺傳輸的file的統一命名
* @param7 imgPref img標籤id的不包括索引值的前綴
看出來了吧，屬性跟追加時是一樣的，只是多了個要顯示的圖片集合和後臺到時候接收這個集合的屬性名

 

規則是這樣的，因爲所有的文件是統一提交的，所以在做刪除的時候，這些接受到的集合是隱藏域，沒顯示的，隱藏域中的值是json格式的數據

顯示效果：

這是隱藏域的內容，看出來了麼，name，就是之前指定的後臺接收這個存在的數據的屬性，必須是個集合接收

這個拿到的數據在隱藏域中是json格式的，是個數組，第一個值表示的就是圖片地址，第二個表示是否存在

開始的時候是存在的，所以是true

當我們刪除之後呢

可以看到變成了false，這就很好辦了，傳到後臺後，可以通過把這個集合裏面的數據通過fastJson轉換一下，就可以判斷這條數據存在不存在了，不存在就將條數據刪除了就行了，

我存在數據庫中這樣的多圖是json格式存的，就是這樣：["地址一"，“地址二”]，這種，所以我的處理方式是

新建集合，將這些爲true的數據裝進新的集合，false的不管，然後再將接受的file文件上傳得到地址裝進這個新集合，將這個新集合直接轉換成json數據替換原有的該字段的數據

 

前端ajax一定要指定 mimeType: "multipart/form-data"

var data = getFormDateReturnForm("form-customer-add");//得到表單數據

var files = new Array();
$("input[name='files']").each(function(){
   files.put($(this).files[0]);
});
data.append("files", files);

$.ajax({
     cache: true,
     type: "POST",
     url: ctx + "vip/customer/add",
     data: data,
     contentType: false,
     processData: false,
     mimeType: "multipart/form-data",
     async: false,
     error: function (request) {
          $.modal.alertError("系統錯誤");
     },
     success: function (data) {
          $.operate.saveSuccess(JSON.parse(data));
     }
 });

//拿到表單中的數據，返回表單對象，傳入的是form表單的id
function getFormDateReturnForm(id) {
	var form = new FormData();
	var t = $('#' + id).serializeArray();
	$.each(t, function() {
		form.append(this.name,this.value);
	});
	return form;
}

後臺：這樣就拿到相應的內容和file文件了

@LoggerManage("保存新增用戶")
@RequiresPermissions("item:goods:add")
@PostMapping(value = "/add", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
@ResponseBody
public JsonResult addSave(Goods goods,
                           @RequestPart(value = "files", required = false) MultipartFile[] files) throws IOException {

    //裏面的內容忽略
        
        return ;
}