zoukankan      html  css  js  c++  java
  • 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);
  • 相关阅读:
    突然想谈谈——我的软件测试入门
    js+rem动态计算font-size的大小,适配各种手机设备!
    iOS 如何打测试包,直接给测试人员使用(绝对的新手入门)
    去掉无用的多余的空格(string1.前后空格,2.中间空格)
    iOS 自定义键盘ToolBar(与键盘的弹出、收起保持一致)
    iOS上线...踩坑
    iOS10 导航条,这个二狗子变了...踩坑
    ios程序发布测试打包
    获取毫秒级时间戳
    弹簧动画效果(系统自带方法)
  • 原文地址:https://www.cnblogs.com/Byme/p/8941560.html
Copyright © 2011-2022 走看看