CODEWITHSUNDEEP
javascripthtml
tamakisquare
tamakisquare

Reputation: 17067

Upload multiple files with a single input element (not multiple select but one at a time)

I have mock-up of a form, in which there's a file input element that users use to select local image to upload. The idea is that users can upload up to four images, using just one file input element but cannot select multiple at a time. The selected images get sent to the server upon form submission. Is this idea feasible using HTML5 + javascript?

Upvotes: 2

Views: 1859

Answers (1)

Abbas
Abbas

Reputation: 6886

If you want to know if it's feasible then yes it is. You can use a single file input element and use it to allow the user to select up to 4 images but assign there values to 3 hidden fie input elements. On submit, all file input elements (hidden and visible) will post their data to the server.

EDIT: here's a HTML+jquery example of setting and getting filepath from file type input control:

<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script type="text/javascript">
        $(document).ready(function(){
            $('#btnImpersonator').bind('click', function(){
                $('#uploader').click();
            });


            $('#uploader').bind('change', function(){
                $('#txtImpersonator').val($('#uploader').val());
                alert($('#uploader').val());
            });
        });
    </script>
</head>
<body>
    <form action="">
        <input type="file" id="uploader" style="display:none">
        <input type="text" id="txtImpersonator" />&nbsp;<input type="button" id="btnImpersonator" value="Browse" />
    </form>
</body>
</html>

Upvotes: 1

Related Questions