script to upload a file without submit

Question

I have the below code to upload a photo. I currently have the process set so it uploads upon click of a submit button. How can I change this code to upload automatically without the submit button? Thanks

HTML:

<form data-ajax="false" id="imageform" action="imageup.php" method="POST" enctype="multipart/form-data" name="form">
    <a id="companylink" href="">
        <div id="yourBtn" onclick="getFile()" onchange="readURL(this);">
            <img id="companyprofileimg" src="image/<?php echo $row['photo']?>"/>
        </div>
        <span id="cetext"><?php echo $row['username']?></span>
    </a>
    <div style='height: 0px;width: 0px; overflow:hidden;'>
        <input id="upfile" type="file" value="upload" name="file" onchange="readURL(this);"/>
    </div>
    <a data-theme="g" data-ajax="false" data-role="button" id="imagesub" onclick="$('#imageform').submit();" aria-disabled="false">Upload Image</a>
</form>

JAVASCRIPT:

 function getFile(){
   document.getElementById("upfile").click();
 }
 function sub(obj){
    var file = obj.value;
    var fileName = file.split("\\");
    document.getElementById("companyprofileimg").innerHTML = fileName[fileName.length-1];
    document.myForm.submit();
    event.preventDefault();
    document.getElementById('imageform').submit();
  }

score 1 · Answer 1 · answered Feb 16 '13 at 16:26

1

JavaScript:

document.getElementById('imageForm').submit();

answered Feb 16 '13 at 16:26

Callan Heard

727
1
8
18

score 1 · Accepted Answer · answered Feb 16 '13 at 16:41

1

try this

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#companyprofileimg')
                .attr('src', e.target.result)
                .width(50)
                .height(50)
        };

        reader.readAsDataURL(input.files[0]);
        $('#imageForm')[0].submit();
    }
}

answered Feb 16 '13 at 16:41

pbaris

4,525
5
37
61

I edited my code. can you give me a solution on the new code. I got rid of the readURL function, it was not needed. Thanks. – Steven Feb 16 '13 at 16:46
@Steven : Also Check this [link](http://stackoverflow.com/questions/2320069/jquery-ajax-file-upload) and [link](http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery) if you want an AJAX like experience – user1428716 Feb 16 '13 at 16:52
@user1428716 looks great but those both still involve a submit button being clicked. – Steven Feb 16 '13 at 16:59
@Steven Okie - so u want user exp. as Facebook and gmail provide ? – user1428716 Feb 16 '13 at 17:21
1

@Steven - in that case please check the link http://robertnyman.com/html5/fileapi-upload/fileapi-upload.html. This should solve your issues. Be sure to test in all browser :) – user1428716 Feb 16 '13 at 17:22

score 0 · Answer 3 · answered Feb 16 '13 at 17:17

0

I just figured it out, I just added the submit onchange to the input, thanks for the help folks

answered Feb 16 '13 at 17:17

Steven

401
3
7
21

script to upload a file without submit

3 Answers3