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);
  • 相关阅读:
    小程序导航栏跟随滑动
    前端每日一题
    Spring框架学习——AOP的开发
    Spring框架学习-Spring的AOP概念详解
    SpringIOC学习_属性注入(依赖注入)
    hibernate与struts2整合中出现问题以及一级缓存查询数据在业务层问题
    工具类学习-java实现邮件发送激活码
    Spring框架学习-搭建第一个Spring项目
    Spring框架学习-Spring和IOC概述
    Hibernate学习——持久化类的学习
  • 原文地址:https://www.cnblogs.com/Byme/p/8941560.html
Copyright © 2011-2022 走看看