This repository was archived by the owner on May 25, 2023. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 7.9k
Multiple File Upload Widgets on the same page
gmdev edited this page Nov 13, 2011
·
10 revisions
In example/index.html duplicate the div with the id "fileupload" and change id to class like this:
<div class="fileupload">
<form action="upload.php" method="POST" enctype="multipart/form-data">
<div class="fileupload-buttonbar">
<label class="fileinput-button">
<span>Add files...</span>
<input type="file" name="files[]" multiple>
</label>
<button type="submit" class="start">Start upload</button>
<button type="reset" class="cancel">Cancel upload</button>
<button type="button" class="delete">Delete files</button>
</div>
</form>
<div class="fileupload-content">
<table class="files"></table>
<div class="fileupload-progressbar"></div>
</div>
</div>
<div class="fileupload">
<form action="upload.php" method="POST" enctype="multipart/form-data">
<div class="fileupload-buttonbar">
<label class="fileinput-button">
<span>Add files...</span>
<input type="file" name="files[]" multiple>
</label>
<button type="submit" class="start">Start upload</button>
<button type="reset" class="cancel">Cancel upload</button>
<button type="button" class="delete">Delete files</button>
</div>
</form>
<div class="fileupload-content">
<table class="files"></table>
<div class="fileupload-progressbar"></div>
</div>
</div>
In example/application.js change
$('#fileupload').fileupload();
to
$('.fileupload').each(function () {
$(this).fileupload({
dropZone: $(this)
});
});
This will give you two complete independent file upload widgets with their own dropZone.