CODEWITHSUNDEEP
htmlfile-upload
David
David

Reputation: 16028

Uploading a file with a single button

All of the examples I've found so far to upload a file with PHP involve:

  1. Choosing a file
  2. Pressing a submit button to upload it (using post).

Here are a few: Example 1 Example 2.

Is there a way to simply submit the file immediately after it's been chosen so the user doesn't have to click the "Upload" button? I know this is possible. Look at Dropbox's website, or Google Drive. I'm not sure if they use PHP, though.

Upvotes: 2

Views: 6502

Answers (4)

Kishor Parida
Kishor Parida

Reputation: 293

Below code will solve your issue regardless of browser incompatibility. I use this very often. 

function startUpload() {
    var file_button = document.createElement('input');
    file_button.type = "file";
    file_button.id = "file_button1";
    file_button.style.display = "none";
    file_button.style.position = "absolute";
    file_button.onchange = function() {
        var form_data = new FormData();
        var file = jQuery(this).get(0).files[0];
        form_data.append('file', file);
        form_data.append('type', type);
        form_data.append('name', 'fileToUpload');
        setTimeout(function() {
            jQuery.ajax({
                url: "/uploadfile.php",
                type: "POST",
                cache: false,
                contentType: false,
                processData: false,
                data: form_data,
                xhr: function() {
                    var myXhr = jQuery.ajaxSettings.xhr();
                    if (myXhr.upload) {
                        myXhr.upload.addEventListener('progress', custom_progress, false);
                    }
                    return myXhr;
                },
                success: function(response) {
                    console.log(response);
                }
            });
        }, 1000);
    };
    jQuery(document.body).append(file_button);
    file_button.click();
    jQuery("#file_button1").remove();
}
function custom_progress(e) {
    if (e.lengthComputable) {
        var x = (e.loaded / e.total) * 100;
        jQuery("#progress").html(x + "%");
    }
}

Your serverside code would look something like this

<?php

$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = pathinfo($target_file, PATHINFO_EXTENSION);
// Check if image file is a actual image or fake image
$check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
if ($check !== false) {
    echo "File is an image - " . $check["mime"] . ".";
    $uploadOk = 1;
} else {
    echo "File is not an image.";
    $uploadOk = 0;
}

Found this solution here at Ajax file upload and progress

Upvotes: 0

A1Gard
A1Gard

Reputation: 4168

You have 2 way :

  1. user jquery :
<form  id="frm" action="upload_file.php" method="post"
enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" id="file" /><br/>
</form>

<script type="text/javascript">
<!--
  $(document).ready(function(){
     $('#file').change(function(){
           $('#frm').submit();
     });
  })
-->
</script>
  1. use flash uploader.

i hope help you...

Upvotes: 3

javram
javram

Reputation: 2645

What you want is the File API that is part of HTML5 http://www.w3.org/TR/FileAPI/ which contains capabilities to upload data via AJAX requests, etc.

unfortunately browser support is still spotty, so while you may be able to implement a drag and drop UI like Dropbox on Chrome or Firefox. You will need to have a fallback for IE.

http://www.html5rocks.com/en/features/file_access

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114347

HTML File upload buttons are not scriptable for security reasons.

Upvotes: 1

Related Questions