我正在尝试在上传到服务器时显示带有输入字段的缩略图图像。问题是我的功能是尝试在上传之前显示图像。
我认为这与在服务器上存在之前调用缩略图有关。有没有办法在完成上传到服务器之后更改我的代码以调用要显示的图像？
这是我的HTML
<div class="module">
<div class="moduleTitle">Upload Photos</div>
<form id="upload" method="post" action="actions/upload.php" enctype="multipart/form-data">
<input type="hidden" name="username" value="<?php echo $username; ?>" id="username">
<div id="drop">
Drop Here
<a>Browse</a>
<input type="file" name="upl" multiple />
</div>
<ul>
<!-- The file uploads will be shown here -->
</ul>
</form>
</div>
<div class="module">
<div class="moduleTitle">Add Tags to Images</div>
<form onSubmit="addTags();return false;" id="tagAddForm">
<ul>
<!-- Ths is where the tag inputs will appear -->
</ul>
<input type="submit" name="login" value="Add Tags" class="submit" id="login"/>
</form>
</div>
这是我的JS
$(function(){
var ul = $('#upload ul');
;;
$('#drop a').click(function(){
// Simulate a click on the file input button
// to show the file browser dialog
$(this).parent().find('input').click();
});
// Initialize the jQuery File Upload plugin
$('#upload').fileupload({
// This element will accept file drag/drop uploading
dropZone: $('#drop'),
// This function is called when a file is added to the queue;
// either via the browse button, or via drag/drop:
add: function (e, data) {
var tpl = $('<li class="working uploaded"><input type="text" value="0" data-width="48" data-height="48"'+
' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><p></p><span></span></li>');
// Append the file name and file size
tpl.find('p').text(data.files[0].name);
//Create an empty container
var path = "artistpit/users/" + $("#username").val() + "/";
var $elems = $();
//Cycle thru the files
$.each(data.files, function(idx, file) {
//Create an input with attrsd
var $input = $("<input/>", {
'type': 'text',
'placeholder': 'separate tags with commas',
'name': file["name"]
});
//Create list element with an image thumb + append input
var $li = $("<li/>", {
html: "<img src='" + path + file["name"] + "' width='50' />"
}).append($input);
//Populate the container with the list item
$elems = $elems.add($li);
});
//Append all list items
$("#tagAddForm > UL").append($elems);
// Add the HTML to the UL element
data.context = tpl.appendTo(ul);
// Initialize the knob plugin
tpl.find('input').knob();
// Listen for clicks on the cancel icon
tpl.find('span').click(function(){
if(tpl.hasClass('working')){
jqXHR.abort();
}
tpl.fadeOut(function(){
tpl.remove();
});
});
// Automatically upload the file once it is added to the queue
var jqXHR = data.submit();
},
progress: function(e, data){
// Calculate the completion percentage of the upload
var progress = parseInt(data.loaded / data.total * 100, 10);
// Update the hidden input field and trigger a change
// so that the jQuery knob plugin knows to update the dial
data.context.find('input').val(progress).change();
if(progress == 100){
data.context.removeClass('working');
}
},
fail:function(e, data){
// Something has gone wrong!
data.context.addClass('error');
}
});
// Prevent the default action when a file is dropped on the window
$(document).on('drop dragover', function (e) {
e.preventDefault();
});
// Helper function that formats the file sizes
function formatFileSize(bytes) {
if (typeof bytes !== 'number') {
return '';
}
if (bytes >= 1000000000) {
return (bytes / 1000000000).toFixed(2) + ' GB';
}
if (bytes >= 1000000) {
return (bytes / 1000000).toFixed(2) + ' MB';
}
return (bytes / 1000).toFixed(2) + ' KB';
}
});
答案 0 :(得分：1)
如果我理解正确，如果您在更新完成后未添加DOM缩略图，则可以解决您的问题。
尝试在上传回调中添加元素。我为submit（）选项添加了一个回调。
$(function(){
var ul = $('#upload ul');
;;
$('#drop a').click(function(){
// Simulate a click on the file input button
// to show the file browser dialog
$(this).parent().find('input').click();
});
// Initialize the jQuery File Upload plugin
$('#upload').fileupload({
// This element will accept file drag/drop uploading
dropZone: $('#drop'),
// This function is called when a file is added to the queue;
// either via the browse button, or via drag/drop:
add: function (e, data) {
var tpl = $('<li class="working uploaded"><input type="text" value="0" data-width="48" data-height="48"'+
' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><p></p><span></span></li>');
// Append the file name and file size
tpl.find('p').text(data.files[0].name);
//Create an empty container
var path = "artistpit/users/" + $("#username").val() + "/";
var $elems = $();
//Cycle thru the files
$.each(data.files, function(idx, file) {
//Create an input with attrsd
var $input = $("<input/>", {
'type': 'text',
'placeholder': 'separate tags with commas',
'name': file["name"]
});
//Create list element with an image thumb + append input
var $li = $("<li/>", {
html: "<img src='" + path + file["name"] + "' width='50' />"
}).append($input);
//Populate the container with the list item
$elems = $elems.add($li);
});
// Add the HTML to the UL element
data.context = tpl.appendTo(ul);
// Initialize the knob plugin
tpl.find('input').knob();
// Listen for clicks on the cancel icon
tpl.find('span').click(function(){
if(tpl.hasClass('working')){
jqXHR.abort();
}
tpl.fadeOut(function(){
tpl.remove();
});
});
// Automatically upload the file once it is added to the queue
var jqXHR = data.submit().success(function(result, textStatus, jqXHR){
//Append all list items
$("#tagAddForm > UL").append($elems);
});
},
progress: function(e, data){
// Calculate the completion percentage of the upload
var progress = parseInt(data.loaded / data.total * 100, 10);
// Update the hidden input field and trigger a change
// so that the jQuery knob plugin knows to update the dial
data.context.find('input').val(progress).change();
if(progress == 100){
data.context.removeClass('working');
}
},
fail:function(e, data){
// Something has gone wrong!
data.context.addClass('error');
}
});
// Prevent the default action when a file is dropped on the window
$(document).on('drop dragover', function (e) {
e.preventDefault();
});
// Helper function that formats the file sizes
function formatFileSize(bytes) {
if (typeof bytes !== 'number') {
return '';
}
if (bytes >= 1000000000) {
return (bytes / 1000000000).toFixed(2) + ' GB';
}
if (bytes >= 1000000) {
return (bytes / 1000000).toFixed(2) + ' MB';
}
return (bytes / 1000).toFixed(2) + ' KB';
}
});