我正在使用 jQueryUI 和 jQuery BlueImp File Uploader。使用上传器，我想用 jQuery UI 创建可拖放的 UI 对象。
但是，为了做到这一点，我需要在显示的文件的前面和后面附加一个<li>and标记。</li>例如，在下面的脚本中，我使用上传器来显示上传的每个图像的缩略图。
如何 在每个正在显示的图像前li添加和附加？/li
<script>
/*jslint unparam: true, regexp: true */
/*global window, $ */
$(function () {
'use strict';
// Change this to the location of your server-side upload handler:
var url = window.location.hostname === '' ?
'' : 'server/php/',
uploadButton = $('<button/>')
// .addClass('btn')
.prop('disabled', true)
// .text('Processing...')
.on('click', function () {
var $this = $(this),
data = $this.data();
$this
.off('click')
.text('Abort')
.on('click', function () {
$this.remove();
data.abort();
});
data.submit().always(function () {
$this.remove();
});
});
$('#fileupload').fileupload({
url: url,
dataType: 'json',
autoUpload: true,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png|mp4)$/i,
maxFileSize: 50000000, // 5 MB
// Enable image resizing, except for Android and Opera,
// which actually support image resizing, but fail to
// send Blob objects via XHR requests:
disableImageResize: /Android(?!.*Chrome)|Opera/
.test(window.navigator.userAgent),
previewMaxWidth: 100,
previewMaxHeight: 100,
previewCrop: true
}).on('fileuploadadd', function (e, data) {
data.context = $('<div/>').appendTo('#files');
$.each(data.files, function (index, file) {
var node = $('<p/>')
//.append($('<span/>').text(file.name));
if (!index) {
node
.append('')
// .append(uploadButton.clone(true).data(data));
}
node.appendTo(data.context);
});
}).on('fileuploadprocessalways', function (e, data) {
var index = data.index,
file = data.files[index],
node = $(data.context.children()[index]);
if (file.preview) {
node
.prepend('')
.prepend(file.preview);
}
if (file.error) {
node
.append('<br>')
.append(file.error);
}
if (index + 1 === data.files.length) {
data.context.find('button')
// .text('Upload2')
.prop('disabled', !!data.files.error);
}
}).on('fileuploadprogressall', function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .bar').css(
'width',
progress + '%'
);
}).on('fileuploaddone', function (e, data) {
$.each(data.result.files, function (index, file) {
// var link = $('<a>')
// .attr('target', '_blank')
// .prop('href', file.url);
$(data.context.children()[index])
// .wrap(link);
});
}).on('fileuploadfail', function (e, data) {
$.each(data.result.files, function (index, file) {
var error = $('<span/>').text(file.error);
$(data.context.children()[index])
.append('<br>')
.append(error);
});
}).prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');
});
</script>
对于上传的每张图片，都会创建一个缩略图并显示在网站上。我的目标是能够将这些缩略图中的每一个都包装在我指定的 html 代码中（将是拖放 li 代码）。有什么建议么？我似乎无法在这段代码中弄清楚我将在哪里添加或附加<li>代码。