Skip to content
WebBuilder 文档

前端上传

WebBuilder 文件上传、拖拽上传和 Grid 拖拽上传的实现方式。

Updated View as Markdown

上传接口方法WB

Wb.upload({
  form: app.formGrid, //上传的表单控件，必选项
  showProgress: true, //显示上传进度条
  url: 'm?xwl=KH/ShipUnloadingDL/shipUnloadingDLData/upload_customs',
  params: {
    T_ID: app.KH_CUSTOMER_BILL_ID.getValue(),
    TNAME: "KH_CUSTOMER_BILL"
  },
  success: function(form, action, value) {
    app.winFile.hide();
  }
});

特殊上传文件处理

拖拽上传

document.getElementById('drop_area').addEventListener('dragover', function(e) {
  e.preventDefault();
});
//放置区域事件控制
document.getElementById("drop_area").addEventListener("drop", function(e) {
  e.preventDefault();
  var inp = document.getElementById("upload");
  var dT = new DataTransfer();
  var dTEmpt = new DataTransfer();
  var files = e.dataTransfer.files;
  //判断文件大小
  for (var i = 0; i < files.length; i++) {
    dT.items.add(files[i]);
  }
  inp.files = dTEmpt.files;
  inp.files = dT.files;
  //手动判断文件变化
  fileChange(inp);
});

//手动修改变化
document.getElementById('upload').addEventListener('change', function(e) {
  var el = e.srcElement;
  fileChange(el);
});
//文件变化处理
function fileChange(el) {
  //设置上传文件文件名显
  var files = el.files;
  var fileNames = [];
  for (var i = 0; i < files.length; i++) {
    if (Math.round(files[i].size / 1024 / 1024) > 10) {
      Wb.warn("上传文件不能大于10M");
      var dTEmpt = new DataTransfer();
      el.files = dTEmpt.files;
      return;
    } else {
      fileNames.push(files[i].name);
    }
  }
  document.getElementById("fileName").innerHTML = fileNames.join(',');
}


//上传文件(测试不通过)
// document.getElementById('up1').addEventListener('click', function(e) {
//   //   console.log(document.getElementById("upload").files);
//   //   var form = document.getElementById("uploadForm");
//   Wb.upload({
//     form: app.form1, //上传的表单控件，必选项
//     showProgress: true, //显示上传进度条
//     url: 'm?xwl=examples/file/dropUpload/upload',
//     //     params: { //以json对象表达的参数列表
//     //       foo: 'bar',
//     //       num: 123,
//     //       date: new Date()
//     //     },
//     //上传成功之后的回调方法
//     success: function(form, action, value) {
//       //value为服务器返回的值，action.response.responseText为服务器返回的原始值
//       Wb.info(value);
//     }
//   });
// });

//上传方式2
document.getElementById('up2').addEventListener('click', function(e) {
  //   console.log(document.getElementById("upload").files);
  var files = document.getElementById("upload").files;
  
  var formDateObj = new FormData();
  for (var i = 0; i < files.length; i++) {
    formDateObj.append('file', files[i]);
  }
  formDateObj.append("beanname", "FileUpload");
  formDateObj.append("method", "updateFile");
  formDateObj.append("username", "ff");

  $.ajax({
    url: "/api/apiFileOpen",
    type: "post",
    data: formDateObj,
    contentType: false, //不要使用任何编码，django后端能够自动识别formdata对象
    processData: false, //告诉浏览器不要对你的数据进行任何处理
    cache: false,
    success: function(result) {
      console.log();
    }
  });
});

//获取文件(非必须)
document.getElementById('getFile').addEventListener('click', function(e) {
  console.log(document.getElementById("upload").files);
  Wb.requestAg({
     params: {
       bean:"FileUpload",
       method:"updateFile"
     },
    success:function(){
    }
  });
});


/**
*使用webbuilder input
**/
var inp2 = document.getElementById(app.file1.fileInputEl.id);

document.getElementById('drop_area2').addEventListener('dragover', function(e) {
  e.preventDefault();
});
//放置区域事件控制
document.getElementById("drop_area2").addEventListener("drop", function(e) {
  e.preventDefault();
  var inp = inp2;
  var dT = new DataTransfer();
  var dTEmpt = new DataTransfer();
  var files = e.dataTransfer.files;
  //判断文件大小
  for (var i = 0; i < files.length; i++) {
    dT.items.add(files[i]);
  }
  inp.files = dTEmpt.files;
  inp.files = dT.files;
  //手动判断文件变化
  fileChange2(inp);
});

//手动修改变化
inp2.addEventListener('change', function(e) {
  var el = e.srcElement;
  fileChange2(el);
});
function fileChange2(el) {
  //设置上传文件文件名显
  var files = el.files;
  var fileNames = [];
  for (var i = 0; i < files.length; i++) {
    if (Math.round(files[i].size / 1024 / 1024) > 10) {
      Wb.warn("上传文件不能大于10M");
      var dTEmpt = new DataTransfer();
      el.files = dTEmpt.files;
      return;
    } else {
      fileNames.push(files[i].name);
    }
  }
  document.getElementById("fileName2").innerHTML = fileNames.join(',');
}

grid 拖拽上传

var gridAreaId = app.gridFile.id + "-body";
var inp2 = document.getElementById(app.file1.fileInputEl.id);

document.getElementById(gridAreaId).addEventListener('dragover', function(e) {
  e.preventDefault();
});
//放置区域事件控制
document.getElementById(gridAreaId).addEventListener("drop", function(e) {
  e.preventDefault();
  var inp = inp2;
  var dT = new DataTransfer();
  var dTEmpt = new DataTransfer();
  var files = e.dataTransfer.files;
  //判断文件大小
  for (var i = 0; i < files.length; i++) {
    dT.items.add(files[i]);
  }
  inp.files = dTEmpt.files;
  inp.files = dT.files;
  //手动判断文件变化
  fileChange2(inp);
});

//手动修改变化
inp2.addEventListener('change', function(e) {
  var el = e.srcElement;
  fileChange2(el);
});

function fileChange2(el) {
  //设置上传文件文件名显
  var files = el.files;
  for (var i = 0; i < files.length; i++) {
    if (Math.round(files[i].size / 1024 / 1024) > 10) {
      Wb.warn("上传文件不能大于10M");
      var dTEmpt = new DataTransfer();
      el.files = dTEmpt.files;
      return;
    }
  }
  if (files.length > 0) {
    Wb.upload({
      form: app.form1, //上传的表单控件，必选项
      showProgress: true, //显示上传进度条
      sync: false,
      url: 'm?xwl=bookingManagement/bookingNotifyEmailSql/fileUpload',
      //上传成功之后的回调方法
      success: function(action, form, value) {
        var urls = value.split(";");
        for (var i in urls) {
          var strs = urls[i].split("/");
          var fileName = strs[strs.length - 1];
          Wb.add(app.gridFile, {
            FILE_NAME: fileName,
            FILE_URL: urls[i]
          });
        }
      }
    });
  }
}
var data = app.get();
if (Wb.isEmpty(data.T_ID)) {
  return;
}
var os;
var fileCustoms = app.getFiles('fileCustoms');
var IOUtils = org.apache.commons.io.IOUtils;
var basePath = Wb.getRecords(app.run("select BASE_PATH from w_path", {
  transaction: 'start'
}));
Wb.each(fileCustoms, function(file, index) {
  if (!file)
    return;
  app.log('进入循环-海关提单文件');
  var timestamp = new Date().getTime();
  var newName = timestamp + (file.name.substring(file.name.lastIndexOf('.'), file.name.length));
  var oldName = file.name;
  var wjfile = new File(basePath[0].BASE_PATH + '/stampOK', newName);
  var jfile = new java.io.File(basePath[0].BASE_PATH + '/stampOK');
  app.run("insert into w_file(id,t_name,t_id,f_path,f_type,record_tim,f_name)\n" +
    "values(sys_guid(),{?TNAME?},{?T_ID?},'/stampOK/'||'" + newName + "','海关提单文件',sysdate,'" + file.name + "')");
  if (jfile.exists()) { //判断路径是否存在
    if (!jfile.isDirectory()) //判断是否为文件夹
      jfile.mkdir(); //创建文件夹
  } else {
    jfile.mkdir();
  }
  var os = new java.io.FileOutputStream(wjfile); //在应用根目录创建文件输出流
  try {
    //file.size为上传的文件大小
    IOUtils.copy(file.stream, os);
  } finally {
    //file.stream可不用关闭，系统会自动关闭
    os.close();
  }
});
Navigation

Type to search…

↑↓ navigate↵ selectEsc close