我上传了一个按钮，但我希望在1页上有几个上传按钮。但无法让它发挥作用......
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fine Uploader - Boostrapped Minimal Demo</title>
<link href="/fineuploader/fineuploader-3.3.0.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css" rel="stylesheet">
<style>
/* Fine Uploader
-------------------------------------------------- */
.qq-upload-list {
text-align: left;
}
/* For the bootstrapped demos */
li.alert-success {
background-color: #DFF0D8 ;
}
li.alert-error {
background-color: #F2DEDE ;
}
.alert-error .qq-upload-failed-text {
display: inline;
}
</style>
</head>
<body>
<div id="bootstrapped-fine-uploader-1"></div>
<script src="/fineuploader/fineuploader-3.3.0.js"></script>
<script>
function createUploader() {
var uploader = new qq.FineUploader({
element: document.getElementById('bootstrapped-fine-uploader-1'),
request: {
endpoint: 'example.php?naam=test.jpg'
},
text: {
uploadButton: '<div><i class="icon-upload icon-white"></i> Test me now and upload a file</div>'
},
template: '<div class="qq-uploader span12">' +
'<pre class="qq-upload-drop-area span12"><span>{dragZoneText}</span></pre>' +
'<div class="qq-upload-button btn btn-success" style="width: auto;">{uploadButtonText}</div>' +
'<span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span>' +
'<ul class="qq-upload-list" style="margin-top: 10px; text-align: center;"></ul>' +
'</div>',
classes: {
success: 'alert alert-success',
fail: 'alert alert-error'
}
});
}
window.onload = createUploader;
</script>
<div id="bootstrapped-fine-uploader-2"></div>
<script src="/fineuploader/fineuploader-3.3.0.js"></script>
<script>
function createUploader() {
var uploader = new qq.FineUploader({
element: document.getElementById('bootstrapped-fine-uploader-2'),
request: {
endpoint: 'example.php?naam=test2.jpg'
},
text: {
uploadButton: '<div><i class="icon-upload icon-white"></i> Upload jpg</div>'
},
template: '<div class="qq-uploader span12">' +
'<pre class="qq-upload-drop-area span12"><span>{dragZoneText}</span></pre>' +
'<div class="qq-upload-button btn btn-success" style="width: auto;">{uploadButtonText}</div>' +
'<span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span>' +
'<ul class="qq-upload-list" style="margin-top: 10px; text-align: center;"></ul>' +
'</div>',
classes: {
success: 'alert alert-success',
fail: 'alert alert-error'
}
});
}
window.onload = createUploader;
</script>
</body>
</html>
只显示第二个按钮，第一个按钮完全消失...是否有人可以帮助我？
答案 0 :(得分：2)
您将window.onload事件分配给第一个函数，然后将其替换为第二个函数。您应该只分配一次事件。此外，您不需要两个单独的脚本标记。
<body>
<div id="bootstrapped-fine-uploader-1"></div>
<div id="bootstrapped-fine-uploader-2"></div>
<script src="fineuploader-3.3.0.js"></script>
<script>
function createUploaders() {
var uploader1 = new qq.FineUploader({
element: document.getElementById('bootstrapped-fine-uploader-1'),
request: {
endpoint: 'example.php?naam=test.jpg'
},
text: {
uploadButton: '<div><i class="icon-upload icon-white"></i> Test me now and upload a file</div>'
},
template: '<div class="qq-uploader span12">' +
'<pre class="qq-upload-drop-area span12"><span>{dragZoneText}</span></pre>' +
'<div class="qq-upload-button btn btn-success" style="width: auto;">{uploadButtonText}</div>' +
'<span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span>' +
'<ul class="qq-upload-list" style="margin-top: 10px; text-align: center;"></ul>' +
'</div>',
classes: {
success: 'alert alert-success',
fail: 'alert alert-error'
}
});
var uploader2 = new qq.FineUploader({
element: document.getElementById('bootstrapped-fine-uploader-2'),
request: {
endpoint: 'example.php?naam=test2.jpg'
},
text: {
uploadButton: '<div><i class="icon-upload icon-white"></i> Upload jpg</div>'
},
template: '<div class="qq-uploader span12">' +
'<pre class="qq-upload-drop-area span12"><span>{dragZoneText}</span></pre>' +
'<div class="qq-upload-button btn btn-success" style="width: auto;">{uploadButtonText}</div>' +
'<span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span>' +
'<ul class="qq-upload-list" style="margin-top: 10px; text-align: center;"></ul>' +
'</div>',
classes: {
success: 'alert alert-success',
fail: 'alert alert-error'
}
});
}
window.onload = createUploaders();
</script>
</body>
答案 1 :(得分：1)
这就是我如何做到的。 它最初是更多的代码，但有意义。您可以根据需要在一个页面上放置尽可能多的上传者。
if (self.settings.businessAddresses !== null) {
$.each(self.settings.businessAddresses, function (index, businessAddress) {
initFileUploader(self.settings.privateAddresses.length + index, businessAddress, "business", self.settings.allowedExtensions);
});
}
这是'通用'文件上传器初始化器的实现。请注意，我正在使用的是Fine Uploader 2.1.2。我认为在新版本中它应该更容易。我有extensions.js来支持每个单独文件的单独参数以及其他一些可能已经在新版本的文件上传器中解决的改进。
// initiate uploader
function initFileUploader(index, addressInstance, addressType, allowedFileExtensions) {
var filesCount = 0;
var uploadButtonSelector = '#triggerUpload-' + addressInstance.Id;
var fileSelectButton = ".qq-upload-button-" + addressInstance.Id;
var uploadedFilesErrorSelector = '#uploadedFilesError-' + addressInstance.Id;
var nextButtonSelector = "#Next";
var previousButtonSelector = "#Previous";
var documentTypeSelector = "#DocumentTypeCode-" + addressInstance.Id;
var prospectCacheKeySelector = "#ProspectCacheKey";
// Set up the upload API
var fileUploader = new qq.FileUploader({
element: $('#filesToUpload-' + addressInstance.Id)[0],
action: '/FileUploader',
autoUpload: false,
uploadButtonText: 'Select a file',
allowedExtensions: allowedFileExtensions,
sizeLimit: 1048576, // 1 MB = 1024 * 1024 bytes,
template: '<div class="qq-uploader">' + // Allow the boostrap styles
'<div class="qq-upload-button-' + addressInstance.Id + ' btn btn-success" style="width: 100px">{uploadButtonText}</div>' +
'<ul class="qq-upload-list-' + addressInstance.Id + '" style="margin-top: 10px; text-align: center;"></ul>' +
'<pre class="qq-upload-drop-area-' + addressInstance.Id + '"><span>{dragText}</span></pre>' +
'</div>',
failUploadText: '',
fileTemplate: '<li>' +
'<span class="qq-document-type-' + addressInstance.Id + '"></span>' +
'<span class="qq-upload-file-' + addressInstance.Id + '">10870</span>' +
'<a class="qq-upload-cancel-' + addressInstance.Id + '" href="#"> Remove</a>' +
'<div class="qq-progress-bar-' + addressInstance.Id + '"></div>' +
'<span class="qq-upload-spinner-' + addressInstance.Id + '" style="display: none;"></span>' +
'<span class="qq-upload-finished-' + addressInstance.Id + '"></span>' +
'<span class="qq-upload-size-' + addressInstance.Id + '" style="display: none;"></span>' +
'<span class="qq-upload-failed-text-' + addressInstance.Id + '"></span>' +
'</li>',
classes: {
button: 'qq-upload-button-' + addressInstance.Id + '',
drop: 'qq-upload-drop-area-' + addressInstance.Id + '',
dropActive: 'qq-upload-drop-area-active-' + addressInstance.Id + '',
dropDisabled: 'qq-upload-drop-area-disabled-' + addressInstance.Id + '',
list: 'qq-upload-list-' + addressInstance.Id + '',
progressBar: 'qq-progress-bar-' + addressInstance.Id + '',
file: 'qq-upload-file-' + addressInstance.Id + '',
documentType: 'qq-document-type-' + addressInstance.Id + '',
applicationId: 'qq-application-id-' + addressInstance.Id + '',
addressId: 'qq-address-id-' + addressInstance.Id + '',
addressType: 'qq-address-type-' + addressInstance.Id + '',
spinner: 'qq-upload-spinner-' + addressInstance.Id + '',
finished: 'qq-upload-finished-' + addressInstance.Id + '',
size: 'qq-upload-size-' + addressInstance.Id + '',
cancel: 'qq-upload-cancel-' + addressInstance.Id + '',
failText: 'qq-upload-failed-text-' + addressInstance.Id + '',
success: 'alert-success',
fail: 'alert-error',
successIcon: null,
failIcon: null
},
onError: function (id, fileName, errorReason) {
alert(errorReason);
},
onComplete: function (id, fileName, response) {
filesCount--;
if (response.success) {
$('<input>').attr({
type: 'hidden',
name: 'UploadedFileIds',
value: response.cacheKey
}).appendTo('form');
}
// Check that we have finished downloading all files
if (fileUploader.getInProgress() == 0) {
// Re-enable the Next button
$(nextButtonSelector).removeAttr('disabled');
$(previousButtonSelector).removeAttr('disabled');
$(uploadButtonSelector).css('visibility', 'hidden');
}
},
onSubmit: function (id, fileName) {
filesCount++;
fileUploader._options.params[id] =
{
documentType: $("select" + documentTypeSelector)[0].value,
documentTypeText: $("select" + documentTypeSelector)[0].options[$("select" + documentTypeSelector)[0].selectedIndex].text,
addressId: addressInstance.Id,
addressType: addressType,
applicationId: addressInstance.ApplicationId,
prospectCacheKey: $(prospectCacheKeySelector).val()
};
// $(documentTypeSelector).prop('selectedIndex', 0);
// $(fileSelectButton).attr('disabled', 'disabled');
// Show the upload button
if ($(uploadButtonSelector).css('visibility') === 'hidden') {
$(uploadButtonSelector).css('visibility', 'visible');
}
// Hide the error for mandatory files upload
$(uploadedFilesErrorSelector).css('display', 'none');
},
onCancel: function (id, fileName) {
filesCount--;
if (filesCount === 0) {
$(uploadButtonSelector).css('visibility', 'hidden');
}
}
});
答案 2 :(得分：0)
您有两个具有相同名称的全局范围函数。第二个createUploader会覆盖第一个createUploader。