使用ajax加载的jQuery对话框让PLUpload玩得更好
他是我的自定义jQuery代码：使用ajax加载的jQuery对话框让PLUpload玩得更好,jquery,jquery-ui,jquery-ui-dialog,plupload,Jquery,Jquery Ui,Jquery Ui Dialog,Plupload,他是我的自定义jQuery代码： /* Files */ $(document).ready(function() { // ----------------------------------------------------- // Define Variables // ----------------------------------------------------- var $filesTab = $("#files"); var $f
/* 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();
}
});
});
});
});
/*文件*/
$（文档）.ready（函数（）{
// -----------------------------------------------------
//定义变量
// -----------------------------------------------------
var$filesTab=$（“#文件”）；
var$filesList=$（“#文件列表”）；
var$foldersList=$（“#文件夹”）；
var$uploadBtn=$（“#上传文件”）；
var objectData={
“对象”：$filesTab.data（“对象”），
“对象id”：$filesTab.data（“对象id”）
};
// -----------------------------------------------------
//加载数据
// -----------------------------------------------------
var filesDataTable=$filesList.dataTable({
“语言”：{
“sSearch”：“搜索文件：”
},
“iDisplayLength”：25
});
$foldersList.bind（“加载”，函数（）{
//加载文件夹
$foldersList.load（“/global ajax/files/get folders/”，objectData）；
})$foldersList.trigger（“加载”）；
// -----------------------------------------------------
//事件
// -----------------------------------------------------
$uploadBtn.bind（“单击”，函数（）{
log（“单击上载文件btn”）；
var uploadFileOptions=objectData；
//获取数据并创建模型
$.get（“/global ajax/files/get upload modal/”，uploadFileOptions，函数（响应）{
log（“Ajax返回”）；
$（响应）。对话框({
可拖动：错误，
莫代尔：是的，
可调整大小：false，
堆栈：false，
标题：“上传文件”，
宽度：“50%”，
按钮：{
“上载”：函数（）{
//提交，做回拨
var$form=$（此）；
var serialized_form_data=decodeURIComponent（$form.serialize（））；
//log（“序列化表单数据：”+序列化表单数据）；
$form.addClass（“加载”）.find（“输入、选择、文本区域”）.attr（“禁用”，true）；
$.post（“/global ajax/files/upload file/”，序列化表单数据，函数（json）{
$form.removeClass（“加载”）.find（“输入、选择、文本区域”）.attr（“禁用”，false）；
}“json”）；
},
“取消”：函数（）{
$（此）.dialog（“关闭”）；
}
},
打开：功能（事件、用户界面）{
var uploader=新的plupload.uploader({
运行时：“gears、html5、flash、silverlight、browserplus”，
浏览按钮：“pickfiles”，
容器：“文件上载”，
最大文件大小：“10mb”，
url:'upload.php'，
flash_swf_url:“/app/javascript/plupload/plupload.flash.swf”，
多重选择：错误
});
uploader.bind（'Init'，函数（up，params）{
$（'#filelist'）.html（“当前运行时：+params.runtime+”）；
});
$（“#上传文件”）.live（“单击”，函数（e）{
uploader.start（）；
e、 预防默认值（）；
});
uploader.bind（'FilesAdded'，函数（up，files）{
$.each（文件、函数（i、文件）{
$（'#文件列表'）。追加(
'' +
file.name+'（'+plupload.formatSize（file.size）+'）”+
'');
});
up.refresh（）；//重新定位Flash/Silverlight
});
uploader.bind（'UploadProgress'，函数（up，file）{
$（'#'+file.id+“b”）.html（file.percent+“%”）；
});
uploader.bind（'Error'，函数（up，err）{
$（“#文件列表”）.append（“错误：+err.code+
，消息：“+err.Message”+
（err.file？”，文件：“+err.file.name:”）+
""
);
up.refresh（）；//重新定位Flash/Silverlight
});
uploader.bind（'fileupload'，函数（up，file）{
$（'#'+file.id+“b”）.html（“100%”）；
});
uploader.init（）；
}
});
});
});
});
<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>
文件夹
CAD文件（3）
估计数（1）
照片（24张）
未分类（11）
上载或编辑文件时，可以创建自定义文件夹
<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>
说明：
作为新文件上载
上传为修订版
'Close':function()
{
$(this).dialog('close');
$(this).remove();
}
$.extend($.ui.dialog.overlay, { create: function(dialog){
if (this.instances.length === 0) {
// prevent use of anchors and inputs
// we use a setTimeout in case the overlay is created from an
// event that we're going to be cancelling (see #2804)
setTimeout(function() {
// handle $(el).dialog().dialog('close') (see #4065)
if ($.ui.dialog.overlay.instances.length) {
$(document).bind($.ui.dialog.overlay.events, function(event) {
var parentDialog = $(event.target).parents('.ui-dialog');
if (parentDialog.length > 0) {
var parentDialogZIndex = parentDialog.css('zIndex') || 0;
return parentDialogZIndex > $.ui.dialog.overlay.maxZ;
}
var aboveOverlay = false;
$(event.target).parents().each(function() {
var currentZ = $(this).css('zIndex') || 0;
if (currentZ > $.ui.dialog.overlay.maxZ) {
aboveOverlay = true;
return;
}
});
return aboveOverlay;
});
}
}, 1);
// allow closing by pressing the escape key
$(document).bind('keydown.dialog-overlay', function(event) {
(dialog.options.closeOnEscape && event.keyCode
&& event.keyCode == $.ui.keyCode.ESCAPE && dialog.close(event));
});
// handle window resize
$(window).bind('resize.dialog-overlay', $.ui.dialog.overlay.resize);
}
var $el = $('<div></div>').appendTo(document.body)
.addClass('ui-widget-overlay').css({
width: this.width(),
height: this.height()
});
(dialog.options.stackfix && $.fn.stackfix && $el.stackfix());
this.instances.push($el);
return $el;
}});