Кажется, я не могу заставить Uploadify (2.1.4) работать. В Google Chrome Inspector консоль не выдает ошибок во время инициализации, однако нажатие на кнопку выбора файлов ничего не происходит, а нажатие кнопки загрузки приводит к:
Uncaught TypeError: Object #<HTMLObjectElement> has no method 'startFileUpload'
У меня нет идеи, где искать, странная вещь, это то, что она показывает ошибку только при вызове любой кнопки или функции, однако .uploadify (); работает нормально.
Я использую:
- JQuery 1.7.1
- Twitter Bootstrap (в данном случае это дурацкие и модальные файлы javascript)
Это код:
<script type="text/javascript">
$(function(){
$("#uploadPopup").modal({
backdrop: "static",
keyboard: false
});
var uploadBox = '<div id="status-message">Select some files to upload:</div>\
<div id="fileQueue"></div>\
<input id="fileUploadSelector" type="file" name="Filedata" />';
var uploadInProgress = false;
$("#uploadphoto").click(function(){
$("#uploadPopup h3").html("Video Uploader");
$("#uploadPopup .modal-body").html(uploadBox);
$('#fileUploadSelector').uploadify({
'uploader': 'static/flash/uploadify/uploadify.swf',
'script': 'www.example.com/script.php',
'cancelImg': 'static/images/uploadify/cancel.png',
'multi': true,
'auto': false,
'fileExt': '*.jpg;*.gif;*.png;*.bmp',
'fileDesc': 'Image Files (.JPG, .GIF, .PNG, .BMP)',
'queueID': 'fileQueue',
'queueSizeLimit': 100,
'simUploadLimit': 2,
'removeCompleted': true,
'buttonText': 'Select Files',
'onSelectOnce': function (event, data) {
$('#status-message').text(data.filesSelected + ' files have been added to the queue.');
},
'onAllComplete': function (event, data) {
$('#status-message').text(data.filesUploaded + ' files uploaded, ' + data.errors + ' errors.');
uploadInProgress = false;
$("#uploadMedia").button('reset');
},
'onClearQueue': function (event, data) {
$('#status-message').text('Upload Cancelled');
uploadInProgress = false;
$("#uploadMedia").button('reset');
}
});
$("#uploadPopup").modal({
backdrop: "static",
keyboard: false
});
});
$("#uploadMedia").live('click', function(){
$("#fileUploadSelector").uploadifyUpload();
uploadInProgress = true;
});
$("#cancelUpload").live('click', function(){
var answer = confirm("Are you sure you want to cancel the upload?");
if(answer) {
$("#fileUploadSelector").uploadifyClearQueue();
$('#uploadPopup').modal('hide');
return true;
} else {
return false;
}
});
});
</script>
И часть HTML:
<div class="btn success" id="uploadphoto">Upload Photo</div>
<div id="uploadPopup" class="modal hide">
<div class="modal-header">
<h3>Photo viewer</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<a href="#" class="btn primary" id="uploadMedia" data-toggle="Uploading..">Upload</a>
<a href="#" class="btn secondary" id="cancelUpload">Cancel</a>
</div>
</div>
Пояснение:
- Пользователь нажимает кнопку #uploadphoto, и появляется модальное окно (на этом этапе инициализируется также uploadify)
- Модал содержит кнопку (#uploadMedia), которая при нажатии запускает загрузку.
- нажатие кнопки отмены (#cancelUpload) отменяет загрузку и закрывает модальный
Пожалуйста, обратите внимание, что это все еще некоторое прототипное кодирование, очистка все еще должна произойти.
Спасибо за любую помощь заранее.