如何使用ajax jquery上传文件，并在struts2中上传时显示进度条我搜索每个没有运气的任何人可以给我的想法或一些代码snipplet谢谢你。现在我正在使用像这样的html中的正常上传。
<a id="addFile-link" href="#" title="add file"><img src="htdocs/images/add_file.png" style="width: 20px; height: 20px; border: 0"></a>
<form id="form" name="form" target="viewFileUpload" method="post"
action="fileUpload.do" enctype="multipart/form-data">
<input type="file" name="upload" id="file" class="fileUpload" multiple>
</form>
$("#addFile-link").click(function() {
var initialFolderId = document.getElementById('currentFolder').value;
//Added for converting first time page load null or empty value validation in Servelet engine
if (initialFolderId == null || initialFolderId == "") {
initialFolderId = 0;
}
document.getElementById('selectedFolder').value = initialFolderId;
$("#file").click();
var uploadElement = document.getElementById("file");
$('#file').change(function() {
uploadElement.form.submit();
//sleep(100)
setTimeout(function() {openFolder(document.getElementById('currentFolder').value);getRecentActivity(0);}, 3000);
$('#Activites').html("");
});
});
答案 0 :(得分：0)
$('#addFile-link').bind("click",function(){
var FolderId
FolderId=document.getElementById('currentFolder').value;
document.getElementById('selectedFolder').value = FolderId;
if( FolderId==" " || FolderId==0){
$('#input').prop('disabled', true);
showFileMSg();
//alert("kindly select a folder to upload files");
}
else{
$('#input').prop('disabled', false);
$('#fileupload').fileupload({
xhrFields: {withCredentials: true},
url: "fileUpload.do?",
type:"POST",
dataType : "JSON",
autoUpload: true,
formdata:{name:'FolderId',value:FolderId},
disableImagePreview:true,
filesContainer: $('table.files'),
uploadTemplateId: null,
downloadTemplateId: null,
uploadTemplate: function (o) {
var rows = $();
$.each(o.files, function (index, file) {
var row = $('<tr class="template-upload fade">' +
'<td><span class="preview"></span></td>' +
'<td><p class="name"></p>' +
'<div class="error"></div>' +
'</td>' +
'<td><p class="size"></p>' +
'<div class="progress"></div>' +
'</td>' +
'<td>' +
(!index && !o.options.autoUpload ?
'<button class="start" disabled>Start</button>' : '') +
(!index ? '<button class="cancel">Cancel</button>' : '') +
'</td>' +
'</tr>');
row.find('.name').text(file.name);
row.find('.size').text(o.formatFileSize(file.size));
if (file.error) {
row.find('.error').text(file.error);
}
rows = rows.add(row);
});
return rows;
},
downloadTemplate: function (o) {
var rows = $();
$.each(o.files, function (index, file) {
var row = $('<tr class="template-download fade">' +
'<td><span class="preview"></span></td>' +
'<td><p class="name"></p>' +
(file.error ? '<div class="error"></div>' : '') +
'</td>' +
'<td><span class="size"></span></td>' +
'<td><button class="delete">Delete</button></td>' +
'</tr>');
row.find('.size').text(o.formatFileSize(file.size));
if (file.error) {
row.find('.name').text(file.name);
row.find('.error').text(file.error);
} else {
row.find('.name').append($('<a></a>').text(file.name));
if (file.thumbnailUrl) {
row.find('.preview').append(
$('<a></a>').append(
$('<img>').prop('src', file.thumbnailUrl)
)
);
}
row.find('a')
.attr('data-gallery', '')
.prop('href', file.url);
row.find('button.delete')
.attr('data-type', file.delete_type)
.attr('data-url', file.delete_url);
}
rows = rows.add(row);
});
return rows;
},
always:function (e, data) {
$.each( function () {
$(this).removeClass('fileupload-processing');
});
},
done: function (e, data) {
$('.template-upload').remove();
$.each(data.files, function (index, file) {
openFolder(FolderId);
});
},
error: function (jqXHR, textStatus, errorThrown) {
alert("jqXHR: " + jqXHR.status + "\ntextStatus: " + textStatus + "\nerrorThrown: " + errorThrown);
}
/*add: function (e, data) {
$('body').append('<p class="upl">Uploading...</p>')
data.submit();
},*/
})
}
});
<form id="fileupload" on action="fileUpload.do" method="POST" enctype="multipart/form-data">
<input id="input" type="file" name="upload" multiple style="cursor: pointer; display: none">
<im:hidden name="selectedFolder" id="selectedFolder" value="1" />
<span class="fileupload-process"></span>
<div class="col-lg-5 fileupload-progress fade">
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-info" style="width:0%;"></div>
</div>
<div class="progress-extended"> </div>
</div>
<table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
</form>