Upload multiple files with a single input element (not multiple select but one at a time)
Question
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?
1 answers
solution1
1 ACCPTED 2011-12-21 19:03:17
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.