---
title: "前端上传"
description: "WebBuilder 文件上传、拖拽上传和 Grid 拖拽上传的实现方式。"
---

> Documentation Index
> Fetch the complete documentation index at: https://ag.879818327.xyz/llms.txt
> Use this file to discover all available pages before exploring further.

# 前端上传

## 上传接口方法WB
``` javascript
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();
  }
});
```
## 特殊上传文件处理
### 拖拽上传
```javascript
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 拖拽上传
```javascript
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]
      });
    }
  }
});
  }
}
```

``` javascript
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();
  }
});
```

Source: https://ag.879818327.xyz/webbuilder/upload/index.mdx