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?
Add a comment
|
1 Answer
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" /> <input type="button" id="btnImpersonator" value="Browse" />
</form>
</body>
</html>
3 Comments
tamakisquare
I thought file input element cannot be programmatically assigned value, no?
Abbas
You are right, it cannot be done that way. However, I have been wracking my brains trying to remember how I did it long, long years ago. Here's what I did: created and hid the file control, used a button and textbox to impersonate a file input type, use the onclick event handler of the button to trick the click event of the file input type. It was all very convoluted but it worked. I'll try to make it work again and update my answer.
Mark
The question didn't ask for it but I'll just mention that that doesn't work for selecting multiple files at once