我使用使用jQuery包装一个MVC4项目中FineUploader 4.0.8。 下面是创建fineUploader的单一实例，并在工作就好了我的js代码的例子。 在这个时候，我有fineUploader的多个实例的需要，但每个单独的控制不知道其他任何东西，他们是呈现为需要在页面上（我见过用jQuery的。每个以前的问题，这将不会在这里工作）。 目前，我似乎无法正确渲染任何上传按钮，可能是由于有重复的ID或东西。 请参阅下面的我如何使用MVC剃刀创建为单独的实例唯一变量和HTML标识。
这是我当前的实现，我已经添加了动态值（在那里你看到_@Model.{PropertyName}的地方）：
// Uploader control setup
var fineuploader_@Model.SurveyItemId = $('#files-upload_@Model.SurveyItemId').fineUploader({
debug: true,
template: 'qq-template_@Model.SurveyItemId',
button: $("#button_@Model.SurveyItemId"),
request:
{
endpoint: '@Url.Action("UploadFile", "Survey")',
customHeaders: { Accept: 'application/json' },
params: {
surveyInstanceId_@Model.SurveyItemId: (function () { return instance; }),
surveyItemResultId_@Model.SurveyItemId: (function () { return surveyItemResultId; }),
itemId_@Model.SurveyItemId: (function () { return itemId; }),
loopingIndex_@Model.SurveyItemId: (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();
filesToUpload_@Model.SurveyItemId++;
$(':input[type=button], :input[type=submit], :input[type=reset]').attr('disabled', 'disabled');
}).on('complete', function (event, id, filename, responseJSON) {
uploadedFileCounter_@Model.SurveyItemId++;
if (filesToUpload_@Model.SurveyItemId == uploadedFileCounter_@Model.SurveyItemId) {
$(':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();
});
});
使用与上述相同的原理，我已经添加了这种逻辑的模板了。
编辑 -添加下面的整个模板：
<script type="text/template" id="qq-template_@Model.SurveyItemId">
<div class="qq-uploader-selector qq-uploader">
<div class="qq-upload-drop-area-selector qq-upload-drop-area qq-hide-dropzone">
<span>Drop files here to upload</span>
</div>
<div class="qq-upload-button-selector qq-upload-button">
<div>Click here to select your upload file(s)</div>
</div>
<span class="qq-drop-processing-selector qq-drop-processing">
<span>Processing dropped files...</span>
<span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
</span>
<ul class="qq-upload-list-selector qq-upload-list">
<li>
<div class="qq-progress-bar-container-selector">
<div class="qq-progress-bar-selector qq-progress-bar"></div>
</div>
<span class="qq-upload-file-selector qq-upload-file"></span>
<span class="qq-upload-status-text-selector qq-upload-status-text"></span>
</li>
</ul>
</div></script>
我看到，当我使用上面的代码只是拖放部分不可见，并没有按钮。 有没有JS错误，无论是。
我有，只有上有这种控制的一个实例的例子，结果都是一样的可见拖放部分和无按钮）。 任何想为这是怎么回事？ 如果你发现我失去了一些东西有帮助，我会很乐意更新的问题。 请不要只是-1我，如果它的东西，我可以很容易地改善或修理。
