隨手筆記（十六）———前端多附件上傳編輯

<div class="form-group">
		<div>
			<label class="col-sm-3 control-label">多附件上傳：</label>

			<div class="col-sm-4">
		    <input id="contractFiles" name="contractFiles" type="file" class="file" style=" border: 0px;" >
			<div id="addDiv">
			<div>
			</div>
			</div>
            </div>
			<button  type="button" οnclick="removeFile()">
				<i class="fa  " aria-hidden="true"></i>刪除附件
			</button>
            </span>
<br/>
	    	<label class="col-sm-1 control-label" style="padding-top: 0;">
			<input type="button" class="btn btn-success"  οnclick="addFile()" value="繼續添加附件" >
			</label>
</div></div>

先附上html部分的代碼

function oldFiles(){

    var contractFilesNames = $("#sign").val();
    var contractFilesIds = $("#projectFile").val();
    var filePaths = $("#filePath").val();

    contractFilesNames = contractFilesNames.split(',');
    contractFilesIds = contractFilesIds.split(',');
    filePaths = filePaths.split(',');
    var arrName = [];
    var arrId = [];

    for (var i = 0; i < contractFilesNames.length; i++) {
        var content = '<div class="form-group" id="addDiv'+i+'">' +
            '<label class="col-sm-3 control-label"></label>'+
            '<span id="fileLink'+i+'" class="col-sm-4">'+'<input id="sign'+i+'" name="sign" value="'+contractFilesNames[i]+'"  type="hidden">'
        +'<input id="oldFileName'+i+'" name="oldFileName" value="'+contractFilesNames[i]+'"  type="hidden" >' +

            '<a  target="_blank" th:href="'+filePaths[i]+'" th:download="'+contractFilesNames[i]+'">'+contractFilesNames[i]+'</a>' +
            '<a class="btn "  href="javascript:void(0)" title="刪除" id="removeItem'+i+'" mce_href="javascript:void(0)" οnclick="removeFileAfter('+i+')" ><i class="fa fa-remove"></i></a>'
        +'</span>'+'<input type="hidden" id="projectFile'+i+'" name="projectFile" value="'+contractFilesIds[i]+'">'
            +'</div>';
        if (contractFilesNames!=""){
            $("#contractFileGroup").append(content);
        }
        var contrfn = $("#sign"+i).val();
        var contrfd = $("#projectFile"+i).val();
 
        arrName.push(contrfn);
        arrId.push(contrfd);
    }
    //獲取最新的文件id和文件名
    var cont = '<input type="hidden" id="contractFileId" name="contractFileId" value="'+arrId+'">'+
    '<input id="contractFileName" name="contractFileName" value="'+arrName+'"  type="hidden">';
    $("#contractFileGroup").append(cont);

}

以上是JS處理舊的附件文件生成的html

function addFile(){
    var num = document.getElementsByName("contractFiles").length;
    num ++;
    var       content ='<div style=" clear: both; padding-bottom: 10px;"></div>' +
        '<div id=addDiv'+num+'>'
    content +='<div class="col-sm-8" style="padding: 0px 10px 0 0px;">';
    content +='<input id="contractFiles"\'+num+\' '
    content += 'name="contractFiles" type="file" class="file" style=" border: 0px;"/>';
    content +='</div>';
    content +='<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>';
    content +='<div class="col-sm-3" style="padding: 5px 0 0 5px;" >';
    content +='<a class="btn btn-warning btn-sm "  style="display:inline" href="javascript:void(0)" title="刪除" id="removeItem'+num+'" mce_href="javascript:void(0)" οnclick="removeOtherFile('+num+')"><i class="fa fa-remove"></i></a>'
    content +=    '</div>';
    content +='</div>';
    $("#addDiv").append(content)
}

function removeOtherFile(num){
    $("#addDiv").find("div[id=addDiv"+num+"]").remove();
}

function hiddenLink() {
    var value = $("#contractFiles").val();
    if(value!=null&&value!="") {
        $("#fileLink").hide();
    }
}

function removeFileAfter(i) {
    var deleteFileId = $("#projectFile"+i).val();
    var deleteFileName = $("#sign"+i).val();
    var content2 = '<input id="deleteFileId'+i+'" name="deleteFileId" value="'+deleteFileId+'"  type="hidden" >'+
        '<input id="deleteFileName'+i+'" name="deleteFileName" value="'+deleteFileName+'"  type="hidden" >';
    $("#addDiv"+i).append(content2);
    $("#oldFileName"+i).val("");
    $("#sign"+i).val("");
    $("#projectFile"+i).val("");
    $("#fileLink"+i).hide();
    var dign = $("#sign"+i).val();
    var dsai = $("#projectFile"+i).val();
}

以上是新文件添加的處理以及刪除移動文件