CODEWITHSUNDEEP
javascripthtmlupload
paulc1111
paulc1111

Reputation: 651

Upload image with a single button in html

I'm a newbie in html/javascript and made two buttons that can upload image (choose file button and upload button).

However, I want to make it to just a single button and don't know how to combine those two button. I already searched on google, they said we can use onchange to combine submit button but I already have onchange function that can show image right away after choosing image file to iframe.

Here is my html code for <form>

 <form action="/upload", method="post", enctype="multipart/form-data">
   <div style='height:0px; width:0px; overflow:hidden;'><input type="file" name="upFile" id="upFile" onchange="getCmaFileView(this, 'name').submit()" target="dropzone_1"/></div>
 </form>

Also, here is my script and button

<script type = "text/javascript">
  function getFile(){
    document.getElementById("upFile").click();
  }
</script>
...
    <li><a onclick="getFile()" style="cursor:pointer; color:#000000;">Choose File</a></li>

I tried with adding .submit() in onchange, but it didn't work.

Does anybody have an idea for this?

Please please help me out here!

Thanks in advance.

EDIT

function getCmaFileInfo(obj,stype) {
        var fileObj, pathHeader , pathMiddle, pathEnd, allFilename, fileName, extName;
        var file;
        var img, reader;
         // file = upload.files[0];
        upload = document.getElementsByTagName('input')[0];
        holder = document.getElementById('dropzone');
        reader = new FileReader();
        file = upload.files[0];
        var iupload, holder;

        reader.onload = function (event) {
                img = new Image();
                //console.log(event.target.result);
                img.src = event.target.result;
                img.width = document.getElementById("dropzone").clientWidth;
                img.height= window.innerHeight;
                // note: no onload required since we've got the dataurl...I think! :)
                holder.innerHTML = '';
                holder.appendChild(img);
        };
        reader.readAsDataURL(file);
}

function getCmaFileView(obj,stype) {
        getCmaFileInfo(obj,stype);
}

Upvotes: 0

Views: 1366

Answers (1)

Hmmm
Hmmm

Reputation: 562

Can't you just add one more function/code in your getCmaFileView() - Which will just submit the form? Also it will be called after your image viewing part is done so that may solve your problem.

function getCmaFileView(obj,stype) {
        getCmaFileInfo(obj,stype);
        //form.submit() OR call_to_your_submit_function();
}

Upvotes: 1

Related Questions