Он мой пользовательский код jQuery:
/* Files */
$(document).ready(function() {
// -----------------------------------------------------
// Define Variables
// -----------------------------------------------------
var $filesTab = $("#files");
var $filesList = $("#files-list");
var $foldersList = $("#file-folders");
var $uploadBtn = $("#upload-file");
var objectData = {
"object" : $filesTab.data("object"),
"object_id" : $filesTab.data("object-id")
};
// -----------------------------------------------------
// Load data
// -----------------------------------------------------
var filesDataTable = $filesList.dataTable({
"oLanguage" : {
'sSearch': "Search Files:"
},
"iDisplayLength" : 25
});
$foldersList.bind("load", function() {
// Load Folders
$foldersList.load("/global-ajax/files/get-folders/", objectData);
}); $foldersList.trigger("load");
// -----------------------------------------------------
// Events
// -----------------------------------------------------
$uploadBtn.bind("click", function() {
debug.log("Clicked upload file btn");
var uploadFileOptions = objectData;
// Get data and create modal
$.get("/global-ajax/files/get-upload-modal/", uploadFileOptions, function(response) {
debug.log("Ajax returned");
$(response).dialog({
draggable: false,
modal: true,
resizable: false,
stack: false,
title: "Upload a File",
width: '50%',
buttons: {
'Upload': function() {
// submit, do callback
var $form = $(this);
var serialized_form_data = decodeURIComponent($form.serialize());
// console.log("Serialized Form Data: " + serialized_form_data);
$form.addClass("loading").find("input, select, textarea").attr("disabled", true);
$.post("/global-ajax/files/upload-file/", serialized_form_data, function(json) {
$form.removeClass("loading").find("input, select, textarea").attr("disabled", false);
}, "json");
},
'Cancel': function() {
$(this).dialog("close");
}
},
open: function(event, ui) {
var uploader = new plupload.Uploader({
runtimes : 'gears,html5,flash,silverlight,browserplus',
browse_button : 'pickfiles',
container : 'file-upload',
max_file_size : '10mb',
url : 'upload.php',
flash_swf_url : '/app/javascript/plupload/plupload.flash.swf',
multi_selection : false
});
uploader.bind('Init', function(up, params) {
$('#filelist').html("<div>Current runtime: " + params.runtime + "</div>");
});
$('#uploadfiles').live("click", function(e) {
uploader.start();
e.preventDefault();
});
uploader.bind('FilesAdded', function(up, files) {
$.each(files, function(i, file) {
$('#filelist').append(
'<div id="' + file.id + '">' +
file.name + ' (' + plupload.formatSize(file.size) + ') <b></b>' +
'</div>');
});
up.refresh(); // Reposition Flash/Silverlight
});
uploader.bind('UploadProgress', function(up, file) {
$('#' + file.id + " b").html(file.percent + "%");
});
uploader.bind('Error', function(up, err) {
$('#filelist').append("<div>Error: " + err.code +
", Message: " + err.message +
(err.file ? ", File: " + err.file.name : "") +
"</div>"
);
up.refresh(); // Reposition Flash/Silverlight
});
uploader.bind('FileUploaded', function(up, file) {
$('#' + file.id + " b").html("100%");
});
uploader.init();
}
});
});
});
});
Код кнопки HTML:
<div class="g3" id="files-sidebar">
<a class="btn green icon big i_cloud_upload" id="upload-file" href="javascript:;">Upload File</a>
<h4>Folders</h4>
<div id="file-folders"><ul>
<li title="Drag and drop files to add to folder" class="i_folder selected">CAD Files (3)</li>
<li class="i_folder">Estimates (1)</li>
<li class="i_folder">Photos (24)</li>
<li class="i_folder">Uncategorized (11)</li>
</ul>
<p>You can create a custom folder when uploading or editing a file.</p>
</div>
</div>
HTML Ajax, загруженный в диалог:
<form id='' method='POST' enctype='multipart/form-data' action='' class="">
<input type="hidden" name="key" value="3b53c6cd33f342246b5cbd59440dac18" />
<fieldset>
<section id="field_description" class="field">
<label for="description" id="">Description: </label>
<div>
<textarea id="description" name="description" class="textarea maxwidth-400 " ></textarea>
<span></span>
</div>
</section>
<section id="field_revision_no" class="checkbox-field field">
<label for="revision_no" id="">Upload as New File</label>
<div>
<input type="radio" id="revision_no" name="revision" value="no" class="radio " CHECKED="CHECKED" />
</div>
</section>
<section id="field_revision_yes" class="checkbox-field field">
<label for="revision_yes" id="">Upload as Revision</label>
<div>
<input type="radio" id="revision_yes" name="revision" value="yes" class="radio " />
</div>
</section>
<div id="file-upload">
<div id="filelist"></div>
<a id="pickfiles" href="#">[Select files]</a>
</div>
</fieldset>
</form>
Здесь происходит несколько вещей, которые не имеют отношения к моему вопросу. Итак, чтобы дать вам общее представление о том, что я пытаюсь сделать ... Я работаю над системой администратора, которая требует возможности загрузки файлов для проектов. Каждый проект использует вкладки пользовательского интерфейса jQuery. Есть вкладка файлов, в которой есть список загруженных файлов и боковая панель с кнопкой загрузки файла. Эта кнопка упоминается в коде как $ uploadBtn.
Все необходимые файлы jQuery и PLUpload загружены на страницу.
Моя сложность заключается в том, что я хочу загрузить форму загрузки из файла ajax с помощью виджета JQuery UI Dialog. У меня эта часть работает каждый раз, когда вы нажимаете кнопку загрузки, но PLUpload правильно инициализируется только при первом открытии диалога загрузки. Я пытался уничтожить экземпляр в обработчике диалогового окна beforeClose, но это не сработало.
Как я могу правильно инициализировать PLUpload каждый раз, когда открываю диалог загрузки, а не только в первый раз !? Спасибо!
Скриншот