How to use Aquantum Multiple File Uploader (Jquery Plugin) for DotNetNuke?
I'm trying to use Aquantum Multiple File Upload in DotNetNuke, but I cannot get it working. Aparently is because I cannot set the form tag.
Does anybody know how to implement the pluing without using the form tag?
Eg: Samples shows the following:
<form id="file_upload" class="file_upload" runat="server">
<div id = "filediv">
<input type="file" name="file" multiple>
<button>Upload</button>
<div>Upload files</div>
</div>
<table id="files"></table> ...
</form>
But I would like to be able to do the following:
<div id="file_upload" class="file_upload" runat="server">
<div id = "filediv">
<input type="file" name="file" multiple>
<button>Upload</button>
<div>Upload files</div>
</div>
<tab开发者_如何学Gole id="files"></table> ...
</div>
The Javascript I'm using is this one:
<script>
/*global $ */
$(function() {
$('.file_upload').fileUploadUI({
url: 'FileUpload.ashx',
method: 'POST',
uploadTable: $('#files'),
downloadTable: $('#files'),
buildUploadRow: function (files, index) {
return $('<tr><td>' + files[index].name + '<\/td>' +
'<td class="file_upload_progress"><div><\/div><\/td>' +
'<\/td><\/tr>');
},
buildDownloadRow: function(file) {
return $('<tr id="file_'+file.name+'"><td>' + file.name + '<\/td>'
+ '<td class="file_uploaded">' +
'<span class="ui-icon ui-icon-check"><\/span>' +
'<\/td><\/tr>');
}, beforeSend: function(event, files, index, xhr, handler, callBack) {
if (files[index].size > 500000) {
handler.uploadRow.find('.file_upload_progress').html('<span class="ui-icon ui-icon-alert"><\/span>FILE TOO BIG!');
setTimeout(function() {
handler.removeNode(handler.uploadRow);
}, 10000);
return;
}
callBack();
}
});
});
</script>
Thanks! Any help will be welcomed!
Looking at the documentation, it looks like you need to use a form
to support IE & Opera, but the only form
available in DNN is the main WebForms one. You might want to consider moving your FileUpload.ashx behavior into an HttpHandler that is setup in the web.config. Then you can process the request before DNN does (add some sort of flag to the post using the formData
option on the jQuery plugin, then look for that in your handler).
Looking at your code, it appears that it should work for the other browsers. The first FAQ in the documentation says that you just need to set url
, method
, and fieldName
options to work around the form for browsers that support it (so you might try setting fieldName
and seeing if that helps).
What problem are you seeing? Any JavaScript errors? Is your ASHX handler being hit at all?
精彩评论