html:
<div class="col-md-4 col-sm-4">
<div class="portlet light bordered">
<div class="portlet-title">
<div class="caption">合同附件</div>
<div class="addcaption">
添加附件
<input type="file" onchange="new_preview(this)">
</div>
</div>
<div class="portlet-body light">
<table class="table table-hover table-bordered" id="filesTable">
<thead>
<tr>
<th>文件名</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
js:
上传----
var files = []; function new_preview(file){ var fileObj = file.files[0]; var formData = new FormData(); formData.append('file', fileObj); formData.append('contractNo', file_contractNo); var options = { url: webroot + "/ht/uploadAndSaveFile", type: 'POST', data: formData, processData: false, contentType: false, success: function(rsp) { console.log(rsp); var innerHtml = '<tr><td>' + rsp.result.fileName + '</td>' + '<td>'+ '<button class="btn green" data-uri="' + rsp.uri + '" onclick="downloadFiles(this)">'+ '<i class="fa fa-download"></i>'+ '</button>'+ // '<button class="btn red" data-uri="' + rsp.uri + '" onclick="new_removeFile(this)">'+ // '<i class="fa fa-trash"></i>'+ // '</button>'+ '</td>'+ '</tr>'; $("#filesTable tbody").append(innerHtml); files.push(rsp); }, error: function(e) { hint("网络错误!"); } }; $.ajax(options); };
下载--------
function new_downloadFiles(id) { if (typeof(downloadFiles.iframe) == "undefined") { var iframe = document.createElement("iframe"); downloadFiles.iframe = iframe; document.body.appendChild(downloadFiles.iframe); } downloadFiles.iframe.src = webroot + "/ht/download?id=" + id; downloadFiles.iframe.style.display = "none"; };
删除-------(未提供接口,只做html删除和数组删除)
function new_removeFile(e) { var _uri = $(e).attr("data-uri"); for (var n = 0; n < files.length; n++) { if (files[n].uri == _uri) { files.splice(n, 1); } } $(e).parent().parent().remove(); }
(获取附件的列表)
for (var m = 0; m < data.files.length; m++) { files_Html += '<tr><td>' + data.files[m].fileName + '</td>' + '<td>'+ '<button class="btn green" onclick="new_downloadFiles(' + "'" + data.files[m].id + "'" + ')">'+ '<i class="fa fa-download"></i>'+ // '<button class="btn red" onclick="new_removeFile(' + "'" + data.files[m].id + "'" + ')">'+ // '<i class="fa fa-trash"></i>'+ '</td></tr>'; } $("#filesTable tbody").append(files_Html);