FineUI 官方论坛

标题: 【已确认】第三方组件webuploader(动态修改formData) [打印本页]

作者: 小    时间: 2019-6-25 15:05
标题: 【已确认】第三方组件webuploader(动态修改formData)
  1. <div class="blockcode"><blockquote>    <script src="../../third-party/webuploader/webuploader.nolog.min.js" type="text/javascript"></script>
  2.     <script type="text/javascript">

  3.         var BASE_URL = '<%= ResolveUrl("~/") %>';
  4.         var SERVER_URL = BASE_URL + 'third-party/webuploader/fileupload.ashx';

  5.         // sizeLimit: 单个文件大小限制,单位为MB
  6.         function initUploader(gridId, pickerId, ownerId, accept, sizeLimit, success, BarCodeValueID) {
  7.             var grid = F(gridId);//返回控件实例
  8.             //隐藏控件值
  9. <font color="#ff0000">            var barcodeID = F(BarCodeValueID).getValue();</font>
  10.             var uploaderOptions = {

  11.                 // swf文件路径
  12.                 swf: BASE_URL + 'third-party/res/webuploader/Uploader.swf',

  13.                 // 文件接收服务端。
  14.                 server: SERVER_URL,

  15.                 // 选择文件的按钮。可选。
  16.                 // 内部根据当前运行是创建,可能是input元素,也可能是flash.
  17.                 pick: '#' + pickerId,

  18.                 // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
  19.                 resize: false,

  20.                 // 自动上传
  21.                 auto: true,

  22.                 // 文件上传参数表,用来标记文件的所有者(如果是一篇文章的附件,就是文章的ID)
  23.                 formData: {
  24.                     owner: ownerId,
  25. <font color="#ff0000">                    barcodes: barcodeID  //我想要每次调用都获取一下这个参数  然后传给后台  但是这样写不行  </font>
  26.                 },

  27.                 // 单个文件大小限制(单位:byte),这里限制为 10M
  28.                 fileSingleSizeLimit: sizeLimit * 1024 * 1024

  29.             };

  30.             //是否为 undefined  jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。  如果是附件上传  就把附件的属性合并到图片上传这儿
  31.             if (accept) {
  32.                 $.extend(uploaderOptions, {
  33.                     accept: accept
  34.                 });
  35.             }


  36.             var uploader = WebUploader.create(uploaderOptions);

  37.             // 添加到上传队列
  38.             uploader.on('fileQueued', function (file) {
  39.                 grid.addNewRecord(file.id, {
  40.                     'FileName': file.name,
  41.                     'FileSize': file.size,
  42.                     'FileStatus': '等待上传'
  43.                 }, true);
  44.             });

  45.             uploader.on('uploadProgress', function (file, percentage) {
  46.                 var cellEl = grid.getCellEl(file.id, 'FileStatus').find('.f-grid-cell-inner');

  47.                 var barEl = cellEl.find('.f-progressbar-value');

  48.                 // 避免重复创建
  49.                 if (!barEl.length) {
  50.                     cellEl.html('<div class="f-progressbar f-widget f-widget-content f-corner-all" style="height:12px;">' +
  51.                       '<div class="f-progressbar-value f-widget-header f-corner-left" style="width:0%">' +
  52.                       '</div></div>');
  53.                     barEl = cellEl.find('.f-progressbar-value');
  54.                 }

  55.                 barEl.css('width', percentage * 100 + '%');
  56.             });

  57.             uploader.on('uploadSuccess', function (file) {
  58.                 var cellEl = grid.getCellEl(file.id, 'FileStatus').find('.f-grid-cell-inner');
  59.                 cellEl.text('上传成功');
  60.             });

  61.             uploader.on('uploadError', function (file) {
  62.                 var cellEl = grid.getCellEl(file.id, 'FileStatus').find('.f-grid-cell-inner');
  63.                 cellEl.text('上传出错');
  64.             });

  65.             // 不管上传成功还是失败,都会触发 uploadComplete 事件
  66.             uploader.on('uploadComplete', function (file) {
  67.                 uploader.removeFile(file, true);
  68.             });


  69.             // 所有文件上传成功
  70.             uploader.on('uploadFinished', function () {
  71.                 if (success) {
  72.                     success.call(uploader);

  73.                

  74.                 }
  75.             });


  76.             // 当开始上传流程时触发
  77.             uploader.on('startUpload', function () {
  78.             
  79.             });


  80.             uploader.on('error', function (type, arg, file) {
  81.                 if (type === 'F_EXCEED_SIZE') {
  82.                     F.alert('文件[' + file.name + ']大小超出限制值(' + F.format.fileSize(arg) + ')');
  83.                 }
  84.             });
  85.         }

  86.         var tab1ClientID1 = '<%= TAB1.ClientID %>';
  87.         var tab1ClientID2 = '<%= TAB2.ClientID %>';
  88.         var tab1ClientID3 = '<%= TAB3.ClientID %>';

  89.         


  90.         var btnSelectFiles1ClientID = '<%= btnSelectFiles.ClientID %>';
  91.         var grid1ClientID = '<%= Grid1.ClientID %>';

  92.         var btnSelectFiles2ClientID = '<%= btnSelectFiles2.ClientID %>';
  93.         var grid2ClientID = '<%= Grid2.ClientID %>';
  94.         //隐藏控件的值
  95.        var BarCodeID= '<%= BarCodeID.ClientID %>';
  96.       
  97.         F.ready(function () {


  98.             initUploader(grid1ClientID, btnSelectFiles1ClientID, 'webuploader.webuploader_tabs.1', undefined, 10, function () {
  99.                 __doPostBack('', 'RebindGrid1');
  100.             }, BarCodeID);

  101.             initUploader(grid2ClientID, btnSelectFiles2ClientID, 'webuploader.webuploader_tabs.2', {
  102.                 title: 'Images', //title {String} 文字描述
  103.                 extensions: 'gif,jpg,jpeg,bmp,png', //extensions {String} 允许的文件后缀,不带点,多个用逗号分割。
  104.                 mimeTypes: 'image/*'//mimeTypes {String} 多个用逗号分割。
  105.             }, 1, function () {
  106.                 __doPostBack('', 'RebindGrid2');
  107.             }, BarCodeID);

  108.          

  109.         });

  110.       

  111.         // 如果初始化 WebUploader 时按钮处于隐藏状态,则点击上传按钮无效。这里是做了一个补救措施
  112.         function onTabStripChange(event, tab) {
  113.             var container = tab.el.find('.webuploader-container');
  114.             var pick = container.find('.webuploader-pick');
  115.             var file = pick.next();

  116.             var pickPos = pick.position();

  117.             file.css({
  118.                 width: pick.width(),
  119.                 height: pick.height()
  120.                 //top: pickPos.top,
  121.                 //left: pickPos.left
  122.             });



  123.             // 如果激活的是第一个选项卡,则重新加载其中的IFrame
  124.             if (tab.id === tab1ClientID1) {
  125.                 //F.alert(F(BarCodeID).getValue());
  126.             } else if (tab.id === tab1ClientID2) {
  127.             //var BB = F(BarCodeID).getValue();
  128.             //F.alert(BB);
  129.         } else if (tab.id === tab1ClientID3) {
  130.             //var BB = F(BarCodeID).getValue();
  131.               //F.alert(BB);
  132.             }

  133.         }



  134.     </script>
复制代码

[attach]12000[/attach]这儿接收到的老是空值  如果第一次的赋值后台就能获取到 ,但是以后每次都接收到的是一样的值
请教三石大佬  指点下  
这儿好像只有第一次的话才能赋值进去  达不到我想要的每次调用都查一遍


作者: sanshi    时间: 2019-6-25 15:32
怎么不行,调试下,看下后台取到的barcodes值是什么?
作者: 小    时间: 2019-6-25 15:41
sanshi 发表于 2019-6-25 15:32
怎么不行,调试下,看下后台取到的barcodes值是什么?
  1. // 如果激活的是第一个选项卡,则重新加载其中的IFrame
  2.             if (tab.id === tab1ClientID1) {
  3.                 //F.alert(F(BarCodeID).getValue());
  4.             } else if (tab.id === tab1ClientID2) {
  5.             //var BB = F(BarCodeID).getValue();
  6.             //F.alert(BB);
  7.         } else if (tab.id === tab1ClientID3) {
  8.             //var BB = F(BarCodeID).getValue();
  9.               //F.alert(BB);
  10.             }

  11.         }
复制代码

作者: sanshi    时间: 2019-6-26 16:11
formData是初始化赋值的,自然不会回发你提交时的改变的值。

查了下百度的文档,这个可以在在 uploadBeforeSend 事件中动态修改 formData 设置的值,类似:
  1. // 动态更新 formData 的值
  2.             uploader.on('uploadBeforeSend', function (obj, data, headers) {
  3.                 data.param1 = new Date().getTime();
  4.             });
复制代码


效果:
[attach]12003[/attach]

作者: 小    时间: 2019-6-26 22:15
sanshi 发表于 2019-6-26 16:11
formData是初始化赋值的,自然不会回发你提交时的改变的值。

查了下百度的文档,这个可以在在 uploadBefor ...

好的好的,我尝试修改下看看,谢谢大佬指点
作者: 小    时间: 2019-6-26 22:30
sanshi 发表于 2019-6-26 16:11
formData是初始化赋值的,自然不会回发你提交时的改变的值。

查了下百度的文档,这个可以在在 uploadBefor ...

[attach]12004[/attach]
后台可以正常接收到值,谢谢大佬





欢迎光临 FineUI 官方论坛 (https://fineui.com/bbs/) Powered by Discuz! X3.4