这个插件做的好，但是调用超级麻烦。

[sailstar]

能不能做的默认简单点的调用，像swfupload定义好几个基本的调用方法。毕竟需要复杂使用的情况还是在少数。页面上的js尽量的简单。
http://fex.baidu.com/webuploader/doc/index.html#WebUploader_Uploader_events
json返回数据的API文档看不懂，就那么一个参数，猜不透。uploadSuccess这边对返回参数怎么调用又没有讲清楚，如果这份API是给你同事看的吗？

[2betop]

我觉得 getting started 里面的示例就足够简单了。 另外关于 json 返回，请查看这个 faq issue。

#136

[sailstar]

getting started一大堆的JS配置，定义那么多调用的方法，还简单。如果一个页面上有十个八个上传框，那个JS如何通用，是不是每个上传框都得写一个？我不太精通JS，只能看些简单的。但我能看明白SWFUpload的调用，却看不懂WEBUploader。

[2betop]

恩，那是因为 swfuploader 是集成了 UI 交互, webuploader 是没有 UI 的， 所有 ui 相关的都得自己写，这个既是优点也是缺点。

[sailstar]

就不能为webuploader定义好一些默认的参数方法，用户使用时只要传输文件容器ID这个参数，其它的均采用后代选择器的CSS来做内部定义，就实现上传么？

[sailstar]

我不晓得你说的UI是指上传框、loading、浏览按钮、上传按钮这些，这些其实是可以自己写，但触发上传功能的调用，需要定义的还是太多..

[2betop]

我说的是交互界面，如果只提供事件和接口的话，这些交互自己想写成什么样就写成什么样，完全没有限制，能满足更多人的需求，因为从历史来看，UI 无论怎么写都总有人觉得不爽。

[2betop]

初始化只需要指定 swf 和 pick 其他都有默认配置。

[sailstar]

谢谢耐心回复。过了一个月了，本来是想这个上传留到后面一点解决。昨天想了一天，还是觉得这种调用方案不太合适，如果一个页面里要出现很多个上传框，这种调用方法会疯掉的。
因为是想能灵活地应用这个上传插件，同时也希望webuploader能做的更好些，所我的一些想法放出来，看看能不能实现。

HTML代码：

选择文件

选择文件

开始上传

选择文件

开始上传

....

选择文件

选择文件

开始上传

选择文件

开始上传

这里不为每个上传框里的元素设置ID，是为了方便在调用时可以在同一页面使用多个webuploader实例。正如你所说，UI不管怎么写总有人觉得不爽。但同一系统的上传UI风格肯定是统一的。如果有变化，上面通过在class属性里增加如newlist/newpicker，或uploader里的元素实现不同风格。

在JS中，使用$("#imageUploder1 .uploader-list)、$("#imageUploder2 .uploader-list)...或$("#imageUploder1")find("div[class$='uploader-list'"])、$("#imageUploder2")find("div[class$='uploader-list'"])...来得到不同上框的对象。以实现显示不同的内容。同样，$("#imageUploder1 .uploader-picker)、$("#imageUploder2 .uploader-picker)...或$("#imageUploder1")find("div[class$='uploader-picker'"])、$("#imageUploder2")find("div[class$='uploader-picker'"])...
可以得到不同的文件选择按钮。上传按钮也是如此。这样，只需要传递不同的uploader的ID到定义好的各种响应方法中，如function fileQueued(uploaderId){..}、function fileQueued(uploaderId){..}就可实现对应的功用。另外，我觉得给出的例子的这种JS内部函数的写法不适合做插件，也不好重复使用。

在初始化配置方面，各个上传框的配置可能是不一样的，我觉得有一个叫ztree的初始化插件值得参考。给出一个配置文件config.js自定义不同的setting，如:
imageSetting{auto:true,...}、imagelistSetting{auto:false,...}等。在需要初始化时，把对应的配置传递出去。

var imageUploader1 = WebUploader.create("imageUploder1", imageSetting);
var imageUploader2 = WebUploader.create("imageUploder2", imagelistSetting);
...或
var imageUploader1 = WebUploader.create($("#imageUploder1"), imageSetting);
var imageUploader2 = WebUploader.create($("#imageUploder2"), imagelistSetting);
..

这样，如果插件已经写的好了，到时一个页面只要一个实例，最终的调用方法会是这样：

选择文件

<script>var imageUploader = WebUploader.create("imageUploder", imageSetting);</script>

其中imageSetting已经在config.js做好对应的配置。

这是我的一点想法，不知道行不行的通。但我真心希望他能做到这个程度。一大早起来写这东西，唉...

[sailstar]

谢谢耐心回复。过了一个月了，本来是想这个上传留到后面一点解决。昨天想了一天，还是觉得这种调用方案不太合适，如果一个页面里要出现很多个上传框，这种调用方法会疯掉的。
因为是想能灵活地应用这个上传插件，同时也希望webuploader能做的更好些，所我的一些想法放出来，看看能不能实现。

HTML代码：

<div id="imageUploder1">
<div class="uploader-list">
<div class="uploader-picker">选择文件</div>
</div>

<div id="imageUploder2">
<div class="uploader-list">
<div class="uploader-picker">选择文件</div>
<button class="btn btn-default uploader-submit">开始上传</button>
</div>

<div id="imageUploder3">
<div class="newlist uploader-list">
<div class="newpicker uploader-picker">选择文件</div>
<button class="btn btn-default uploader-submit">开始上传</button>
</div>
....
<div id="fileUploder1">
<div class="uploader-list">
<div class="uploader-picker">选择文件</div>
</div>

<div id="fileUploder2">
<div class="uploader-list">
<div class="uploader-picker">选择文件</div>
<button class="btn btn-default uploader-submit">开始上传</button>
</div>

<div id="fileUploder3">
<div class="newlist uploader-list">
<div class="newpicker uploader-picker">选择文件</div>
<button class="btn btn-default uploader-submit">开始上传</button>
</div>
...

这里不为每个上传框里的元素设置ID，是为了方便在调用时可以在同一页面使用多个webuploader实例。正如你所说，UI不管怎么写总有人觉得不爽。但同一系统的上传UI风格肯定是统一的。如果有变化，上面通过在class属性里增加如newlist/newpicker，或uploader里的元素实现不同风格。

在JS中，使用$("#imageUploder1 .uploader-list)、$("#imageUploder2 .uploader-list)...或$("#imageUploder1")find("div[class$='uploader-list'"])、$("#imageUploder2")find("div[class$='uploader-list'"])...来得到不同上框的对象。以实现显示不同的内容。同样，$("#imageUploder1 .uploader-picker)、$("#imageUploder2 .uploader-picker)...或$("#imageUploder1")find("div[class$='uploader-picker'"])、$("#imageUploder2")find("div[class$='uploader-picker'"])...
可以得到不同的文件选择按钮。上传按钮也是如此。这样，只需要传递不同的uploader的ID到定义好的各种响应方法中，如function fileQueued(uploaderId){..}、function fileQueued(uploaderId){..}就可实现对应的功用。另外，我觉得给出的例子的这种JS内部函数的写法不适合做插件，也不好重复使用。

在初始化配置方面，各个上传框的配置可能是不一样的，我觉得有一个叫ztree的初始化插件值得参考。给出一个配置文件config.js自定义不同的setting，如:
imageSetting{auto:true,...}、imagelistSetting{auto:false,...}等。在需要初始化时，把对应的配置传递出去。

var imageUploader1 = WebUploader.create("imageUploder1", imageSetting);
var imageUploader2 = WebUploader.create("imageUploder2", imagelistSetting);
...或
var imageUploader1 = WebUploader.create($("#imageUploder1"), imageSetting);
var imageUploader2 = WebUploader.create($("#imageUploder2"), imagelistSetting);
..

这样，如果插件已经写的好了，到时一个页面只要一个实例，最终的调用方法会是这样：
<div id="imageUploder">
<div class="uploader-list">
<div class="uploader-picker">选择文件</div>
</div>
<script>
$(document).ready(function(){
var imageUploader = WebUploader.create("imageUploder", imageSetting);
});
</script>

其中imageSetting已经在config.js做好对应的配置。

这是我的一点想法，不知道行不行的通。但我真心希望他能做到这个程度。一大早起来写这东西，唉...

[F0ur]

你可以在dom上做文章

<div id="imageUploder1" node-type="webuploader" node-data-config="imageConfig1">
    <div class="uploader-list">
    <div class="uploader-picker">选择文件</div>
</div>
<div id="imageUploder2" node-type="webuploader" node-data-config="imageConfig2">
    <div class="uploader-list">
    <div class="uploader-picker">选择文件</div>
</div>

var Config = {
    'defaultConfig' : {...},
    'imageConfig1' : {...},
    'imageConfig2' : {...}
}
$('[node-type="webloader"]').each(function() {
    var configName = $(this).attr('node-data-config') || 'defaultConfig';
    var uploader = WebUploader.create(Config[configName]);
    $(this).data('uploader', uploader);
    $(this).data('uploader').on('beforeFileQueued', Config[configName]['beforeFileQueued']);
    ...
})

[sailstar]

谢谢回复，但我这方面的技术不行，真心看不懂。很希望能给详细一点，或者给个demo，可以吗？

[sailstar]

这个，真的不能看懂...Config里的pick如何初始化，each里最后一句什么意思能不能具体点..

在 2014-08-22 11:46:58，"F0ur" [email protected] 写道：

你可以在dom上做文章

<divid="imageUploder1"node-type="webuploader"node-data-config="imageConfig1"><divclass="uploader-list"><divclass="uploader-picker">选择文件<divid="imageUploder2"node-type="webuploader"node-data-config="imageConfig2"><divclass="uploader-list"><divclass="uploader-picker">选择文件
varConfig={'defaultConfig':{...},'imageConfig1':{...},'imageConfig2':{...}}$('[node-type="webloader"]').each(function(){varconfigName=$(this).attr('node-data-config')||'defaultConfig';varuploader=WebUploader.create(Config[configName]);$(this).data('uploader',uploader);$(this).data('uploader').on('beforeFileQueued',function(){...})})

—
Reply to this email directly or view it on GitHub.