Question

I am using this reference
http://www.openjs.com/articles/ajax/ajax_file_upload/response_data.php
for ajax uploader ,its working absolutely fine for single upload but i want to convert this script into multiple upload with the help of your guidance also helps are definitely appreciated..

I just want to know how do i target a multiple iframe with the using of single form. Current script is target on a spacefic formId like this and this form contain only one input file…

Code

<script type="text/javascript">
function init() {
    document.getElementById("file_upload_form").onsubmit=function() {
     document.getElementById("file_upload_form").target = "upload_target";
     document.getElementById("upload_target").onload = uploadDone; 
    }
}
window.onload=init;
<script>

<form id="file_upload_form" method="post" enctype="multipart/form-data" action="http://www.appifylabs.com/web/php-upload-progress-bar/uploaderSecond/upload.php/">
<input name="file" id="file" size="27" type="file" multiple="multiple"/><br />
<input type="submit" name="action" value="Upload Image" /><br />
<iframe id="upload_target" onload="uploadDone()" name="upload_target"  src="" style="width:600px;height:600px;border:1px solid #ccc;"></iframe>
</form>

Attempt didn’t work

<script type="text/javascript">
    function init() {
        document.getElementById("file_upload_form").onsubmit=function() {
             document.getElementById("file_1").target = "upload_target_1";
             document.getElementById("file_2").target = "upload_target_2";
        }
    }
window.onload=init;
<script>

Notice

I don’t want to use any third party uploader like uploadify,JqueryUploader,Valum etc only the reason for learn

Answer 1

Each form can have only one target. And target is a property of the FORM element, not the INPUT ones (you tried above).

One possible solution is to clone the form using Jquery, set the corresponding target to the required IFRAME and submit each clone.