uploading a pic from computer with single button in php

Question

<html>
   <head>
      <title>File Upload Form</title>
   </head>
   <body>
      This form allows you to upload a file to the server.<br />
      <form action="getfile.php" method="post"><br />
         Type (or select) Filename: 
         <input type="file" name="uploadFile" />
         <input type="submit" value="Upload File" />
      </form>
   </body>
</html>

I am working on a php language . I am uploading a pic from my computer . But there are two buttons ie choose file and Upload file . CHOOSE FILE is used to select the picture from PC and upload file button is used as SUBMIT button but i need a single button by clicking on it it will open my pc window to browse the photos and select it and it also act as a submit button . Is there any way to do this with single button

@Hanky웃Panky seriously? It IS possible. Easy, to be honest. — Joran Den Houting, Sep 25 '13 at 07:01
I have seen it in facebook , twitter ..........when click on the add album button and after selecting it will show you the images you have selected — PHP_USER1, Sep 25 '13 at 07:02
Can you guys gime a link to a demo? will be a nice learning experience. `CHOOSE FILE is used to select the picture from PC and upload file button is used as SUBMIT button but i need a single button by clicking on it it will open my pc window to browse the photos and select it and it also act as a submit button ` — Hanky Panky, Sep 25 '13 at 07:02
You can call submit when the input file changes: http://stackoverflow.com/questions/7321855/how-do-i-auto-submit-an-upload-form-when-a-file-is-selected — user1498339, Sep 25 '13 at 07:02
Note that your form tag is missing the attribute enctype='multipart/form-data', you need it to upload a file. — user1498339, Sep 25 '13 at 07:04

score 5 · Accepted Answer · answered Sep 25 '13 at 07:05

5

you need to change to things in your form tag:

1) Add a name tag: say name="frm"
2) enctype="multipart/form-data"

Then in your input file type add a function onchange="frm.submit();" // Where frm is name of the form

answered Sep 25 '13 at 07:05

Mayank Sharma

844
7
21

please can you explain me more coz i m new in this field – PHP_USER1 Sep 25 '13 at 07:09
2

Your form tag will look like this:
And Input tag will be:
– Mayank Sharma Sep 25 '13 at 07:11
thnx but i need i also don't know about the java script to please can u explain me submit(); also – PHP_USER1 Sep 25 '13 at 07:15
1

frm.submit() will call submit function of you form. frm is name of the form and .submit() will call its submit event i.e. submit button you mentioned in the form. – Mayank Sharma Sep 25 '13 at 07:19

Donovan Charpin · Answer 2 · 2013-09-25T07:07:16.253

3

You can wait an event change on the input type="file" and send file after this event.

If you use jQuery, you can send the form with .submit().

Try with something like this

$("input[type='file']").on("change", function(){
   $("form").submit();
});

.on("change", handler) : http://api.jquery.com/change/

.submit() : http://api.jquery.com/submit/

edited Sep 25 '13 at 07:07

answered Sep 25 '13 at 07:01

Donovan Charpin

3,567
22
30

score 0 · Answer 3 · answered Sep 25 '13 at 07:01

used jquery uplodify: uploadify

Demo

$(function() {
    $("#file_upload_1").uploadify({
        height        : 30,
        swf           : '/uploadify/uploadify.swf',
        uploader      : '/uploadify/uploadify.php',
        width         : 120
    });
});

also check this for auto upload auto upload

RyanB · Answer 4 · 2013-09-25T07:31:17.640

0

This is what I've done in my project:

HTML:

<input type="button" id="btnUpload" value="Upload File" />
<form action="getfile.php" method="post" id="upload_form" style="display: none;">
    Type (or select) Filename: 
    <input type="file" name="uploadFile" />
</form>

Javascript

$(function(){
    $('#btnUpload').click(function(){
        //Show select file dialog
        $('#uploadFile').click();

        //Wait for user to select a file
        var tmr = setInterval(function(){
            if($('#uploadFile').val() !== "") {
                clearInterval(tmr);
                $('#upload_form').submit();
            }
        }, 500);
    });
});

edited Sep 25 '13 at 07:31

answered Sep 25 '13 at 07:16

RyanB

1,287
1
9
28

its not working man . when i click on upload , its doing nothing – PHP_USER1 Sep 25 '13 at 07:19
i just copy and pasted your whole code in my page and at top of my page , i have written this – PHP_USER1 Sep 25 '13 at 07:25
No man. This is my project's code. So, you have to edit all the locators to suit your need. :) – RyanB Sep 25 '13 at 07:28
It works for me only if edited as follows: – Kenny D. Dec 05 '14 at 02:40

score 0 · Answer 5 · answered Sep 25 '13 at 07:20

Here's the code. Just use this as it is and it will work.

<html>
<head>
<title>File Upload Form</title>
</head>
<script>
$(document).ready(function(){
$("input[type='file']").on("change", function(){
$("#form1").submit();
});
});
</script>
   <body>
  This form allows you to upload a file to the server.<br />
  <form action="getfile.php" method="post" enctype="multipart/form-data" id="form1"><br />
     Type (or select) Filename: 
     <input type="file" name="uploadFile" />
     <input type="submit" value="Upload File" />
  </form>
  </body>
</html>

uploading a pic from computer with single button in php

5 Answers5