Pat*_*ato 1 html css jquery fine-uploader
首先,我想说我的英语不好,所以我要道歉.我的问题是我试图自定义FineUploader FileTemplate选项但没有成功.我不想使用fineUploaderBasic.我想要完全定制.首先,我试图在上传成功后隐藏文件名和大小,并且我成功地完成了它,但是当我尝试自定义删除按钮时,问题就开始了.上传后删除按钮出现但已禁用,我无法单击它.下面是我的代码:
var restricteduploader = new qq.FineUploader({
element: $('#restricted-fine-uploader')[0],
text: {
uploadButton: '<div><i class="icon-upload icon-white"></i>Subir Imagen</div>',
deleteButton: '<input type="button" id="btnDelete" value="Eliminar imagen" />'
},
template:
'<div class="qq-uploader">' +
'<div class="qq-upload-drop-area"><span>{dragZoneText}</span></div>' +
'<div class="qq-upload-button">{uploadButtonText}</div>' +
'<span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span>' +
'<ul class="qq-upload-list"></ul>' +
'</div>',
fileTemplate:
'<li>' +
'<div class="qq-progress-bar"></div>' +
'<span class="qq-upload-spinner"></span>' +
'<span class="qq-upload-finished"></span>' +
'<span class="qq-edit-filename-icon"></span>' +
'<span class="hide-file"></span>' +
'<div>IMAGEN SUBIDA CON EXITO!!</div>' +
'<input class="qq-edit-filename" tabindex="0" type="text">' +
'<span class="hide-size"></span>' +
'<a class="qq-upload-cancel" href="#">{cancelButtonText}</a>' +
'<a class="qq-upload-retry" href="#">{retryButtonText}</a>' +
'<div class="qq-upload-delete">{deleteButtonText}</div>' +
'<span class="qq-upload-status-text">{statusText}</span>' +
'</li>',
classes: {
file: 'hide-file',
size: 'hide-size'
},
request: {
endpoint: '<%= Url.Action("UploadBatchDataFile", "Account") %>'
},
deleteFile: {
enabled: true,
endpoint: '<%= Url.Action("DeleteFile", "Account") %>',
method: 'POST'
},
multiple: false,
validation: {
allowedExtensions: ['jpeg', 'jpg', 'png'],
sizeLimit: 411062 // 50 kB = 50 * 1024 bytes
},
showMessage: function (message) {
$('#restricted-fine-uploader').append('<div class="alert-error">' + message + '</div>');
},
//listElement: document.getElementById('files'),
messages: { typeError : "{file} no es un tipo de imagen valido. Imagenes valida(s): {extensions}." },
callbacks: {
onSubmitDelete: function(event, id) {
var filename = $(this).fineUploader('getName', id);
$(this).fineUploader('setDeleteFileParams', {filename: filename}, id);
},
onComplete: function (id, filename, responseJSON) {
if (responseJSON.success) {
$('div div.alert-error').remove();
$('#imgUploaded').attr("src", "<%: Url.Content("~/Images/") %>" + responseJSON.filename);
$('#hidImage').attr("value", "<%: Url.Content("~/Images/") %>" + responseJSON.filename);
}
}
}
});
对我来说,定制fileTemplate是非常困难的,在此之前我试图让FileTemplate成为表的一部分,在模板上更改它
'<ul class="qq-upload-list"></ul>' to '<table class="qq-upload-list"></table>'
这个在fileTemplate上
'<li>' to '<tr><td>' and '</li>' to </td></tr>
但是再次这不起作用,在成功上传FineUploader后没有向我显示FileTemplate.
首先,在onComplete处理程序内部更改时会出现语法错误.更改
$('#imgUploaded').attr("src", "<%: Url.Content("~/Images/") %>" + responseJSON.filename);
$('#hidImage').attr("value", "<%: Url.Content("~/Images/") %>" + responseJSON.filename);
至
$('#imgUploaded').attr("src", "<%: Url.Content('~/Images/') %>" + responseJSON.filename);
$('#hidImage').attr("value", "<%: Url.Content('~/Images/') %>" + responseJSON.filename);
其次,在您的text选项属性中,您提供HTML而不是要在按钮内显示的文本字符串.所以你应该改变,
text: {
uploadButton: '<div><i class="icon-upload icon-white"></i>Subir Imagen</div>',
deleteButton: '<input type="button" id="btnDelete" value="Eliminar imagen" />'
},
至
text: {
uploadButton: 'Subir Imagen',
deleteButton: 'Eliminar imagen'
},
如果您仍想添加上传图标(如我所见),或以任何其他方式自定义HTML,请修改template选项属性:
template:
'<div class="qq-uploader">' +
'<div class="qq-upload-drop-area"><span>{dragZoneText}</span></div>' +
'<div class="qq-upload-button"><i class="icon-upload icon-white"></i>{uploadButtonText}</div>' +
'<span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span>' +
'<ul class="qq-upload-list"></ul>' +
'</div>',
最后,您在FineUploader的实例中似乎混合了jQuery和非jQuery代码.你知道FineUploader有一个jQuery插件,对吗？它会让你的生活变得更加简单,它会让你的回调实际工作,因为价值this在
onSubmitDelete: function(event, id) {
var filename = $(this).fineUploader('getName', id);
$(this).fineUploader('setDeleteFileParams', {filename: filename}, id);
},
根本不会成为FineUploader实例化的元素.如果你使用的是jQuery插件,那就行了.
使用jQuery插件,你可以做...
$("#restricted-fine-uploader").fineUploader({
// .. define your options here, same as above ...
}).on('submitDelete', function (event, id) {
var filename = $(this).fineUploader('getName', id);
$(this).fineUploader('setDeleteFileParams', {filename: filename}, id);
}).on('complete', function (event, id, filename, responseJSON) {
if (responseJSON.success) {
$('div div.alert-error').remove();
$('#imgUploaded').attr("src", "<%: Url.Content('~/Images/') %>" + responseJSON.filename);
$('#hidImage').attr("value", "<%: Url.Content('~/Images/') %>" + responseJSON.filename);
}
});
这里有一些代码,它们显示了如何a)正确使用jQuery插件和事件,以及b)如何使用一个input元素作为一个删除按钮.
注意:这需要FineUploader> = 3.7.1
$(function () {
$("#restricted-fine-uploader").fineUploader({
text: {
uploadButton: "<i class='icon-upload icon-white'></i>Subir Imagen"
},
fileTemplate:
'<li>' +
'<div class="qq-progress-bar"></div>' +
'<span class="qq-upload-spinner"></span>' +
'<span class="qq-upload-finished"></span>' +
'<span class="hide-file"></span>' +
'<div>IMAGEN SUBIDA CON EXITO!!</div>' +
'<span class="hide-size"></span>' +
'<a class="qq-upload-cancel" href="#">{cancelButtonText}</a>' +
'<a class="qq-upload-retry" href="#">{retryButtonText}</a>' +
'<input class="qq-upload-delete" type="button" value="{deleteButtonText}" />' +
'<span class="qq-upload-status-text">{statusText}</span>' +
'</li>',
classes: {
file: 'hide-file',
size: 'hide-size'
},
request: {
endpoint: '<%= Url.Action("UploadBatchDataFile", "Account") %>'
},
deleteFile: {
enabled: true,
endpoint: '<%= Url.Action("DeleteFile", "Account") %>',
method: 'POST'
},
multiple: false,
validation: {
allowedExtensions: ['jpeg', 'jpg', 'png'],
sizeLimit: 411062 // 50 kB = 50 * 1024 bytes
},
showMessage: function (message) {
$('#restricted-fine-uploader').append('<div class="alert-error">' + message + '</div>');
},
//listElement: document.getElementById('files'),
messages: {
typeError: "{file} no es un tipo de imagen valido. Imagenes valida(s): {extensions}."
}
}).on('submitDelete', function (event, id) {
var filename = $(this).fineUploader('getName', id);
$(this).fineUploader('setDeleteFileParams', {
filename: filename
}, id);
}).on('complete', function (id, filename, responseJSON) {
if (responseJSON.success) {
$('div div.alert-error').remove();
$('#imgUploaded').attr('src', '<%: Url.Content("~/Images/") %>' + responseJSON.filename);
$('#hidImage').attr('value', '<%: Url.Content("~/Images/") %>' + responseJSON.filename);
}
});
});
<ul id="restricted-fine-uploader"></ul>