我已经安装了 blueimp jQuery-file-upload
但是我在完成上传后修改视图时遇到了一个大问题,我想通过在特定 div 中提升图像来进行展示
我希望所有编辑都必须在 jquery.fileupload-uix.js 中,
在这段代码中:
this.getFileUrl = function (file, handler) {
return file.url;
};
this.getThumbnailUrl = function (file, handler) {
return file.thumbnail;
};
this.buildMultiDownloadRow = function (files, handler) {
var rows = $('<tbody style="display:none;"/>');
$.each(files, function (index, file) {
rows.append(handler.buildDownloadRow(file, handler).show());
});
return rows;
};
this.buildDownloadRow = function (file, handler) {
if ($.isArray(file)) {
return handler.buildMultiDownloadRow(file, handler);
}
var fileName = handler.formatFileName(file.name),
fileUrl = handler.getFileUrl(file, handler),
thumbnailUrl = handler.getThumbnailUrl(file, handler),
downloadRow = handler.downloadTemplate
.clone().removeAttr('id');
downloadRow.attr('data-id', file.id || file.name);
downloadRow.find('.file_name a')
.text(fileName);
downloadRow.find('.file_size')
.text(handler.formatFileSize(file.size));
if (thumbnailUrl) {
downloadRow.find('.file_download_preview').append(
$('<a/>').append($('<img/>').attr('src', thumbnailUrl || null))
);
downloadRow.find('a').attr('target', '_blank');
}
downloadRow.find('a')
.attr('href', fileUrl || null)
.each(handler.enableDragToDesktop);
downloadRow.find('.file_download_delete button')
.button({icons: {primary: 'ui-icon-trash'}, text: false});
return downloadRow;
};
在 HTML 中:
<div id="file_upload" class="panel">
<form action="upload.php" method="POST" enctype="multipart/form-data">
<div id="buttons">
<div id="file-wrapper" class="title" title="upload images from your computer">
<input type="file" name="file[]" multiple="" accept="image/jpeg,image/gif,image/png,image/bmp" />
</div>
<div class="center">
<input type="button" id="url" class="button-big title" title="upload images from the web" value="" />
</div>
</div>
</form>
<table class="files">
<tr class="file_upload_template" style="display:none;">
<td class="file_upload_preview"></td>
<td class="file_name"></td>
<td class="file_size"></td>
<td class="file_upload_progress"><div></div></td>
<td class="file_upload_start"><button>Start</button></td>
<td class="file_upload_cancel"><button>Cancel</button></td>
</tr>
<tr class="file_download_template" style="display:none;">
<td class="file_name"><a></a></td>
<td class="file_size"></td>
<td class="file_download_delete" colspan="3"><button>Delete</button></td>
</tr>
</table>
<div class="file_upload_overall_progress"><div style="display:none;"></div></div>
<div class="file_upload_buttons">
<button class="button-big file_upload_start">Start All</button>
<button class="file_upload_cancel">Cancel All</button>
</div>
</div>
<br />
<div class="panel">
<div id="shows">
<!-- HERE I Want to repeat the div like -->
<div class='preview'>
<h2>name</h2>
<img srch='img' />
</div>
</div>
</div>
我不断尝试,但没有我认为可以展示的代码。