附件上传

1. HTML

<span class="icon-box " 
    onclick="importExcel()"><i class="iconbtn icon-in"></i>导入
</span>

效果如下图：

导入按钮.png

2.JS

//导入
importExcel = function(){//触发事件
        ip.uploadFile(getFilecallback_excel);//getFilecallback_excel回调函数    
 };

/**
 * 文件上传（选择附件）
 */
var ip = {};
//显示选择文件的弹框，以数组形式返回选中的文件
ip.uploadFile = function(callback) {//callback在确定上传文件后触发
    // var input = '<input type="file" id="_select-file" hidden>'
    var input = document.createElement('input')
    input.type = 'file'
    input.id = '_select-file'
    input.style.display = 'none'
    input.multiple = 'true'
    // input.accept =
    input.onchange = function(e) {
        $('#_select-file').remove()
        var files = [].slice.call(e.target.files, 0)
        if(typeof callback === 'function') {
            callback(files, e)
        }
    }
    document.body.appendChild(input)
    input.click()
}

//回调函数，将附件传给后台
getFilecallback_excel = function(files){
      //组织数据传到后台
    var data = new FormData();//传给后台的文件要用FormData包起来！！
    files.forEach(function(file) {
        data.append('files', file);
    });
    data.append('svMenuId', options["svMenuId"]);
    data.append('actionType', PeConstant.WfActionType.INPUT);
    $.ajax({
        type : 'POST',
        url : '/df/pe/importdata/import.do',
        data : data,
        beforeSend : function() {
            //ip.loading(true);
        },
        complete : function() {
            //ip.loading(false);                            
        },
        processData : false,
        contentType : false,
        success : function(data) {//data为后台返回数据
            if (data.errorCode == '0') {
                alert('上传成功);
            } else {
                alert('上传失败);
            }
        },
        error : function() {
            alert('上传失败);
        },
    });
};