jQuery file upload --Multiple File Input Fields in One Form

The plugin can be applied to a form with multiple file input fields out of the box. The files are sent to the server with the parameter name of the file input field clicked by the user.

The following is a short howto on how to add an additional file input field to the example:

In index.html duplicate the span tag with the class "fileinput-button" like this:

<form id="fileupload" action="php/index.php" method="POST" enctype="multipart/form-data">
    <div class="row">
        <div class="span16 fileupload-buttonbar">
            <div class="progressbar fileupload-progressbar"><div style="width:0%;"></div></div>
            <span class="btn success fileinput-button">
                <span>Add files...</span>
                <input type="file" name="files[]" multiple>
            </span>
            <!-- Extra file input start /-->
            <span class="btn fileinput-button">
                <span>Other...</span>
                <input type="file" name="files2[]" multiple>
            </span>
            <!--/ Extra file input stop -->
            <button type="submit" class="btn primary start">Start upload</button>
            <button type="reset" class="btn info cancel">Cancel upload</button>
            <button type="button" class="btn danger delete">Delete selected</button>
            <input type="checkbox" class="toggle">
        </div>
    </div>
    <br>
    <div class="row">
        <div class="span16">
            <table class="zebra-striped"><tbody class="files"></tbody></table>
        </div>
    </div>
</form>

Adjust the name attribute of your file input fields according to what is expected on your server-side handler.

 

上一篇:搜索专题训练 D Find The Multiple


下一篇:为什么swift是面向协议的编程--对面向对象机制的改进