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