file 文件上传，下载，删除

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" οnchange="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);

 

更多专业前端知识，请上 【猿2048】www.mk2048.com