{
 "hidden": false,
 "children": [{
  "configs": {"itemId": "sys.demo.dragUpload"},
  "expanded": true,
  "children": [{
   "configs": {
    "layout": "border",
    "itemId": "viewport1"
   },
   "expanded": true,
   "children": [
    {
     "configs": {
      "itemId": "panel1",
      "html": "<!-- <div id=\"drop_area\">\
<div>将您的产品附件拖拽到此处<\/div>\
<input class=\"upload\" type=\"file\" name=\"name\" multiple=\"multiple\"/>\
<div>请将文件控制在 100MB 以内<\/div>\
<\/div> -->\
<div style=\"position:relative;\">\
  <div class=\"ui-upload\" onclick=\"document.getElementById('upload').click()\" id=\"drop_area\"\
       style=\"text-align:center;height: 30px;line-height: 30px;width: 150px;background: pink;\">\
    上传文件(可拖拽)\
  <\/div> \
  <input id = \"upload\" type=\"file\" style=\"display:none\" multiple=\"multiple\"/>\
  <div id=\"fileName\">当前未选择文件<\/div>\
  <button id =\"getFile\">获取文件<\/button>\
<!--   <button id = \"up1\">上传方式1<\/button> -->\
  <button id = \"up2\">上传方式2<\/button>\
<\/div>\
",
      "region": "center"
     },
     "expanded": true,
     "children": [],
     "type": "panel"
    },
    {
     "configs": {
      "itemId": "panel2",
      "region": "south",
      "height": "500"
     },
     "expanded": true,
     "children": [
      {
       "configs": {
        "itemId": "panelDropArea",
        "html": "<div onclick=\"sys.demo.dragUpload.chooseFile()\" id=\"drop_area2\"\
     style=\"text-align:center;height: 30px;line-height: 30px;width: 150px;background: pink;\">\
  上传文件2(可拖拽)\
<\/div> \
<div id=\"fileName2\">当前未选择文件<\/div>"
       },
       "expanded": false,
       "children": [],
       "type": "panel"
      },
      {
       "configs": {
        "itemId": "form1",
        "hidden": "true"
       },
       "expanded": true,
       "children": [{
        "configs": {
         "itemId": "file1",
         "multiple": "true"
        },
        "expanded": false,
        "children": [],
        "type": "file"
       }],
       "type": "form"
      },
      {
       "configs": {
        "itemId": "item1",
        "xtype": "button",
        "text": "测试"
       },
       "expanded": false,
       "children": [],
       "type": "item",
       "events": {"click": "// document.getElementById(app.file1.fileInputEl.id).click();\
// console.log(document.getElementById(app.file1.fileInputEl.id).files);\
\
if (!Wb.verify(app.form1)) //验证值是否合法\
  return;\
//上传数据。此方法采用multipart/form-data编码上传数据，因此后台必须通过request.getAttribute(itemId)获取指定控件数据\
Wb.upload({\
  form: app.form1, //上传的表单控件，必选项\
  showProgress: true, //显示上传进度条\
  url: 'm?xwl=examples/file/download-upload/process-upload&type=1',\
  //out:[panel1, grid1],以控件列表的方式上传指定控件值\
  //showMask: false,上传过程不显示mask\
  //message: '正在上传中...',\
  //mask: app.form1, //mask遮盖对象，未指定默认为全屏，前2秒透明遮盖。\
  params: { //以json对象表达的参数列表\
    foo: 'bar',\
    num: 123,\
    date: new Date()\
  },\
  //上传成功之后的回调方法\
  success: function(form, action, value) {\
    //value为服务器返回的值，action.response.responseText为服务器返回的原始值\
    Wb.info(value);\
  }\
});"}
      }
     ],
     "type": "panel"
    }
   ],
   "type": "viewport",
   "events": {"afterrender": "/**\
*原生input方式\
**/\
\
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(',');\
}\
"}
  }],
  "type": "module",
  "events": {"initialize": "Wb.apply(app, {\
  chooseFile: function() {\
    document.getElementById(app.file1.fileInputEl.id).click();\
  }\
});"}
 }],
 "roles": {"demo": 1},
 "title": "拖拽上传",
 "iconCls": "",
 "inframe": false,
 "pageLink": ""
}