• 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" 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);
  • 相关阅读:
    Unknown type '246 in column 3 of 5 in binary-encoded result set
    IOS开发常用的linux命令
    苹果开发中常用英语单词
    ios 中的UI控件学习总结(1)
    Srping MVC+mybatis mapping 多映射 配置
    IIS程序POST请求被触发两次的灵异事件
    文件服务器共享专用端口留档记录
    windows环境配置showdoc在线文档教程
    WindowsSever2008 R2 Standard 共享打印机手顺
    高效计算_七月算法5月深度学习班第2次课程笔记
  • 原文地址:https://www.cnblogs.com/Byme/p/8941560.html
Copyright © 2020-2023  润新知