Jump to content

Recommended Posts

I am trying to upload a single file, and from this page https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

 

I was able to put together a sample script that works in Chrome and Firefox.  One look at the script, and its clear why it doesn't work in IE.

 

var selected_file = document.getElementById('input').files[0];

 

IE doesn't support uploading multiple files.  My problem is that I search this problem on the net and I find questions pertaining to uploading multiple files, and the replies go all over the place and they are all talking about uploading many files.  I just want to upload one file.  Is there something I can do to that one line, that would make the below scripts work in Chrome, FF and IE?

 

I was thinking something like

 

var selected_file = document.getElementById('input').file;

 

Of course that doesn't work.

 

The main page script:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">

        function sendFile(file) {
            var uri = "/test_ajax_upload.php";
            var xhr = new XMLHttpRequest();
            var fd = new FormData();
             
            xhr.open("POST", uri, true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // Handle response.
                    alert(xhr.responseText); // handle response.
                }
            };
            fd.append('myFile', file);
            // Initiate a multipart/form-data upload
            xhr.send(fd);
        }
 
	function start_upload_stuff() {
		var selected_file = document.getElementById('input').files[0];
		sendFile(selected_file);
	}
</script>
</head>
<body>
<input type="file" id="input" name="input">
<br />
<input type="button" id="start_upload" name="start_upload" Value="Start Upload" onclick="start_upload_stuff();" />

</body>
</html>

 

And test_ajax_upload.php:

<?php
if (isset($_FILES['myFile'])) {
    // Example:
    move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
    exit;
}
?>

 

 

 

You can see this code live at http://www.marcomtechnologies.com/test_upload.php

 

Any assistance is greatly appreciated!  What I really like about the above script is it is not using any additional plug ins, its clean and just does what I need it to do, minus not working in IE of course!

 

Thanks!!!

Nick

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.