【已确认】第三方组件webuploader（动态修改formData）

小 · 发表于 2019-6-25 15:05:40

<div class="blockcode"><blockquote> <script src="../../third-party/webuploader/webuploader.nolog.min.js" type="text/javascript"></script>
<script type="text/javascript">
var BASE_URL = '<%= ResolveUrl("~/") %>';
var SERVER_URL = BASE_URL + 'third-party/webuploader/fileupload.ashx';
// sizeLimit：单个文件大小限制，单位为MB
function initUploader(gridId, pickerId, ownerId, accept, sizeLimit, success, BarCodeValueID) {
var grid = F(gridId);//返回控件实例
//隐藏控件值
<font color="#ff0000"> var barcodeID = F(BarCodeValueID).getValue();</font>
var uploaderOptions = {
// swf文件路径
swf: BASE_URL + 'third-party/res/webuploader/Uploader.swf',
// 文件接收服务端。
server: SERVER_URL,
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#' + pickerId,
// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
resize: false,
// 自动上传
auto: true,
// 文件上传参数表，用来标记文件的所有者（如果是一篇文章的附件，就是文章的ID）
formData: {
owner: ownerId,
<font color="#ff0000"> barcodes: barcodeID //我想要每次调用都获取一下这个参数然后传给后台但是这样写不行 </font>
},
// 单个文件大小限制（单位：byte），这里限制为 10M
fileSingleSizeLimit: sizeLimit * 1024 * 1024
};
//是否为 undefined jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。如果是附件上传就把附件的属性合并到图片上传这儿
if (accept) {
$.extend(uploaderOptions, {
accept: accept
});
}
var uploader = WebUploader.create(uploaderOptions);
// 添加到上传队列
uploader.on('fileQueued', function (file) {
grid.addNewRecord(file.id, {
'FileName': file.name,
'FileSize': file.size,
'FileStatus': '等待上传'
}, true);
});
uploader.on('uploadProgress', function (file, percentage) {
var cellEl = grid.getCellEl(file.id, 'FileStatus').find('.f-grid-cell-inner');
var barEl = cellEl.find('.f-progressbar-value');
// 避免重复创建
if (!barEl.length) {
cellEl.html('<div class="f-progressbar f-widget f-widget-content f-corner-all" style="height:12px;">' +
'<div class="f-progressbar-value f-widget-header f-corner-left" style="width:0%">' +
'</div></div>');
barEl = cellEl.find('.f-progressbar-value');
}
barEl.css('width', percentage * 100 + '%');
});
uploader.on('uploadSuccess', function (file) {
var cellEl = grid.getCellEl(file.id, 'FileStatus').find('.f-grid-cell-inner');
cellEl.text('上传成功');
});
uploader.on('uploadError', function (file) {
var cellEl = grid.getCellEl(file.id, 'FileStatus').find('.f-grid-cell-inner');
cellEl.text('上传出错');
});
// 不管上传成功还是失败，都会触发 uploadComplete 事件
uploader.on('uploadComplete', function (file) {
uploader.removeFile(file, true);
});
// 所有文件上传成功
uploader.on('uploadFinished', function () {
if (success) {
success.call(uploader);
}
});
// 当开始上传流程时触发
uploader.on('startUpload', function () {
});
uploader.on('error', function (type, arg, file) {
if (type === 'F_EXCEED_SIZE') {
F.alert('文件[' + file.name + ']大小超出限制值（' + F.format.fileSize(arg) + '）');
}
});
}
var tab1ClientID1 = '<%= TAB1.ClientID %>';
var tab1ClientID2 = '<%= TAB2.ClientID %>';
var tab1ClientID3 = '<%= TAB3.ClientID %>';
var btnSelectFiles1ClientID = '<%= btnSelectFiles.ClientID %>';
var grid1ClientID = '<%= Grid1.ClientID %>';
var btnSelectFiles2ClientID = '<%= btnSelectFiles2.ClientID %>';
var grid2ClientID = '<%= Grid2.ClientID %>';
//隐藏控件的值
var BarCodeID= '<%= BarCodeID.ClientID %>';
F.ready(function () {
initUploader(grid1ClientID, btnSelectFiles1ClientID, 'webuploader.webuploader_tabs.1', undefined, 10, function () {
__doPostBack('', 'RebindGrid1');
}, BarCodeID);
initUploader(grid2ClientID, btnSelectFiles2ClientID, 'webuploader.webuploader_tabs.2', {
title: 'Images', //title {String} 文字描述
extensions: 'gif,jpg,jpeg,bmp,png', //extensions {String} 允许的文件后缀，不带点，多个用逗号分割。
mimeTypes: 'image/*'//mimeTypes {String} 多个用逗号分割。
}, 1, function () {
__doPostBack('', 'RebindGrid2');
}, BarCodeID);
});
// 如果初始化 WebUploader 时按钮处于隐藏状态，则点击上传按钮无效。这里是做了一个补救措施
function onTabStripChange(event, tab) {
var container = tab.el.find('.webuploader-container');
var pick = container.find('.webuploader-pick');
var file = pick.next();
var pickPos = pick.position();
file.css({
width: pick.width(),
height: pick.height()
//top: pickPos.top,
//left: pickPos.left
});
// 如果激活的是第一个选项卡，则重新加载其中的IFrame
if (tab.id === tab1ClientID1) {
//F.alert(F(BarCodeID).getValue());
} else if (tab.id === tab1ClientID2) {
//var BB = F(BarCodeID).getValue();
//F.alert(BB);
} else if (tab.id === tab1ClientID3) {
//var BB = F(BarCodeID).getValue();
//F.alert(BB);
}
}
</script>

复制代码

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

sanshi · 发表于 2019-6-25 15:32:23

怎么不行，调试下，看下后台取到的barcodes值是什么?

小 · 发表于 2019-6-25 15:41:38

sanshi 发表于 2019-6-25 15:32
怎么不行，调试下，看下后台取到的barcodes值是什么?

// 如果激活的是第一个选项卡，则重新加载其中的IFrame
if (tab.id === tab1ClientID1) {
//F.alert(F(BarCodeID).getValue());
} else if (tab.id === tab1ClientID2) {
//var BB = F(BarCodeID).getValue();
//F.alert(BB);
} else if (tab.id === tab1ClientID3) {
//var BB = F(BarCodeID).getValue();
//F.alert(BB);
}
}

复制代码

sanshi · 发表于 2019-6-26 16:11:26

formData是初始化赋值的，自然不会回发你提交时的改变的值。

查了下百度的文档，这个可以在在 uploadBeforeSend 事件中动态修改 formData 设置的值，类似：

// 动态更新 formData 的值
uploader.on('uploadBeforeSend', function (obj, data, headers) {
data.param1 = new Date().getTime();
});

复制代码

效果：

小 · 发表于 2019-6-26 22:15:12

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

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

好的好的，我尝试修改下看看，谢谢大佬指点

小 · 发表于 2019-6-26 22:30:18

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

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

后台可以正常接收到值，谢谢大佬

		自动登录	找回密码
密码			立即注册

【已确认】第三方组件webuploader（动态修改formData）

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源