ansaurus

Question

howto upload a file via a single html form to more than just a single server

Answer 1

A:

This is not possible with plain HTML and a browser.

cweiske 2010-09-29 11:15:05

I'm not sure. It is possible to define a redirect value inside the html form. Maybe I could jump from one form to the next one. Is it possible to add a parameter that submits a html form automatically? I need solution that works on client (browser) side.

Neverland 2010-09-29 13:01:44

with a redirect, you will lose the file upload.

cweiske 2010-09-29 13:35:15

But the redirect starts just after the upload was successful.

Neverland 2010-09-29 13:48:54

a redirect (i.e. "<meta refresh>") will clear the form, "Location:" header also. And it is not possible to re-fill the form file upload automatically.

cweiske 2010-09-29 14:30:34

Do you think I can solve this via JavaScript?

Neverland 2010-09-29 14:46:54

no, because when you are done sending the form to the first server, the result page is loaded and you have lost the form and its data. You might want to try this: http://www.captain.at/ajax-file-upload.php

cweiske 2010-09-29 14:53:16

Answer 2

+1 A:

You can use flash to do that for you (a lot easier).

Or I think you can use invisible frames and javascript. Target the upload on the hidden frames and change the action. The example below will upload the same file one server after the other.

Here's the code:

<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript">
    $(function(){
        $('#button1').click(function(){

            $('#frame1').load(function(){
               $('#form1')
                 .attr('action', 'http://server2/')
                 .attr('target', 'frame2')
                 .submit();
            });

            $('#form1')
               .attr('action', 'http://server1/')
               .attr('target', 'frame1')
               .submit();

            return true;
        });
    });
</script>
<style type="text/css"></style>
</head>
<body>
    <form id="form1" method="POST" enctype="multipart/form-data" action="http://cgi-lib.berkeley.edu/ex/fup.cgi"&gt; 
      File to upload: <input type="file" name="upfile" /><br> 
      Notes about the file: <input type="text" name="note" /><br>
    </form>

    <button id="button1">Multiple upload</button>
    <br />

    <iframe id="frame1" name="frame1"></iframe>
    <iframe id="frame2" name="frame2"></iframe>
</body>
</html>

Dan 2010-09-29 15:39:58

Uploading in parallel would be perfect!

Neverland 2010-09-30 05:59:57

let me know if this is what you want. Remember that u can change the 'action' also to upload to different servers. This example uploads 2 times (one after the other) on the same server.

Dan 2010-10-01 17:51:22

This code is very helpful for me. But I don't know how to include more than one server in the action field. Do you have an example with different servers?

Neverland 2010-10-04 19:01:39

You change it dynamically the same way I change the target. I'll modify my answer to include the change of action.

Dan 2010-10-04 19:16:31

Thanks a lot! I have a last question. For each different server destination I need different hidden fields. How can I give form1 these different hidden files?

Neverland 2010-10-04 20:24:54

All you have to do is add them dynamically $('#form1') .append('<input type="hidden" name="hello" value="world" />') .attr('action', 'server1') .attr('target', 'frame1') .submit();

Dan 2010-10-04 22:52:48

Puh. I implemented it this way and now there is one problem. When I add hidden fields dynamically via .prepend (append is not working), the fist upload works. But the second one is not working. I think the problem is, that hidden fiels that are prepended, remain in the second upload.

Neverland 2010-10-20 16:06:15

ansaurus

tags:

views:

answers:

howto upload a file via a single html form to more than just a single server

related questions