FineUploader多个实例和动态命名

我在使用jquery包装器的MVC4项目中使用FineUploader 4.0.8。 这是我的js代码的一个例子，它创建了一个fineUploader的单个实例，并且工作得很好。 这时，我需要一个以上的fineUploader实例，但是每个单独的控件都不知道关于另一个的任何内容，并且它们在页面上根据需要进行渲染（我以前使用过jQuery看过这些问题。） ，这不会在这里工作）。 目前，我似乎无法正确呈现任何上传按钮，可能是由于ID重复或其他原因。 请参阅下文，了解我如何使用MVC的Razor为该单个实例创建唯一变量和html ID。

这是我当前的实现，其中我添加了动态值（您看到_@Model.{PropertyName}的位置）：

// Uploader control setup var [e-mail] = $('#[e-mail]').fineUploader({ debug: true, template: '[e-mail]', button: $("#[e-mail]"), request: { endpoint: '@Url.Action("UploadFile", "Survey")', customHeaders: { Accept: 'application/json' }, params: { [e-mail]: (function () { return instance; }), [e-mail]: (function () { return surveyItemResultId; }), [e-mail]: (function () { return itemId; }), [e-mail]: (function () { return loopingCounter++; }) } }, validation: { acceptFiles: ['image/*', 'application/xls', 'application/pdf', 'text/csv', 'application/vnd.openxmlformats-officedocument.spreadsheetml.template', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-excel'], allowedExtensions: ['jpeg', 'jpg', 'gif', 'png', 'bmp', 'csv', 'xls', 'xlsx', 'pdf', 'xlt', 'xltx', 'txt'], sizeLimit: 1024 * 1024 * 2.5, // 2.5MB stopOnFirstInvalidFile: false }, failedUploadTextDisplay: { mode: 'custom' }, multiple: true, text: { uploadButton: 'Select your upload file(s)' } }).on('submitted', function (event, id, filename) { $("#modal-overlay").fadeIn(); $("#modal-box").fadeIn(); [e-mail]++; $(':input[type=button], :input[type=submit], :input[type=reset]').attr('disabled', 'disabled'); }).on('complete', function (event, id, filename, responseJSON) { [e-mail]++; if ([e-mail] == [e-mail]) { $(':input[type=button], :input[type=submit], :input[type=reset]').removeAttr('disabled'); //$("#overlay").fadeOut(); $("#modal-box").fadeOut(); $("#modal-overlay").fadeOut(); } }).on('error', function (event, id, name, errorReason, xhr) { //$("#overlay").fadeOut(); alert('error: ' + errorReason); $("#modal-box").fadeOut(); $("#modal-overlay").fadeOut(); }); }); 

使用与上面相同的原理，我也将此逻辑添加到模板中。

编辑 – 添加了以下整个模板：

   
 
 Drop files here to upload 
 
 
Click here to select your upload file(s)
 
  Processing dropped files...   
 
 
 
 
   
 
  

我在使用上面的代码时看到的只是拖放部分可见，没有按钮。 也没有js错误。

我有一个例子，它只有一个这个控件的实例，结果是相同的可见拖放部分，没有按钮）。 有什么想法发生了什么？ 如果你发现我遗漏了一些有用的东西，我很乐意更新这个问题。 请不要只是-1我，如果这是我可以轻松改进或修复的东西。

Answer 1

如果您没有看到上传按钮，则模板中不会显示正确标记的按钮。 在您提供的模板中似乎就是这种情况。 如果您的实际模板确实包含正确标记的上传按钮，则template选项中的template未正确引用，或者在构建Fine Uploader实例之前，您的模板未在页面上正确呈现。

Answer 2

以下是我目前正在为上传控件的多个实现做的事情：

我有一些列在其他地方的div包含’Loading’文本（ID：modal-box，modal-overlay）。 它们根据需要上传的文件数量显示，并在完成后消失。 让用户不要一遍又一遍地点击，你知道那是怎么回事……

JS：

 var [e-mail] = $('#[e-mail]').fineUploader({ debug: true, template: '[e-mail]', button: $("#[e-mail]"), request: { endpoint: '@Url.Action("UploadFile", "Survey")', customHeaders: { Accept: 'application/json' }, params: { surveyInstanceId: (function () { return [e-mail]; }), surveyItemResultId: (function () { return [e-mail]; }), itemId: (function () { return [e-mail]; }), loopingIndex: (function () { return [e-mail]++; }) } }, validation: { acceptFiles: ['image/*', 'application/xls', 'application/pdf', 'text/csv', 'application/vnd.openxmlformats-officedocument.spreadsheetml.template', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-excel'], allowedExtensions: ['jpeg', 'jpg', 'gif', 'png', 'bmp', 'csv', 'xls', 'xlsx', 'pdf', 'xlt', 'xltx', 'txt'], sizeLimit: 1024 * 1024 * 2.5, // 2.5MB stopOnFirstInvalidFile: false }, failedUploadTextDisplay: { mode: 'custom' }, multiple: true, text: { [e-mail]: 'Select your upload file(s)' } }).on('submitted', function (event, id, filename) { $("#modal-overlay").fadeIn(); $("#modal-box").fadeIn(); [e-mail]++; $(':input[type=button], :input[type=submit], :input[type=reset]').attr('disabled', 'disabled'); }).on('complete', function (event, id, filename, responseJSON) { [e-mail]++; if ([e-mail] == [e-mail]) { $(':input[type=button], :input[type=submit], :input[type=reset]').removeAttr('disabled'); //$("#overlay").fadeOut(); $("#modal-box").fadeOut(); $("#modal-overlay").fadeOut(); } }).on('error', function (event, id, name, errorReason, xhr) { //$("#overlay").fadeOut(); alert('error: ' + errorReason); $("#modal-box").fadeOut(); $("#modal-overlay").fadeOut(); }); }); 

HTML：我为大多数DIV添加了动态ID，但我并不确定它是否重要。 当我拖放时，所有实例都将显示拖放区域，因为hover按类更改div。 这对我来说不是什么大问题，但期待这一点。