最初に、私の英語が下手なので、お詫びしたいと思います。私の問題は、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 が表示されないため、これも機能しません。