HTML Javascript File Upload

Question

I have following HTML object with file

  <form name='file_form' class="panel-body">
    <input type="file" id="file" name="file[]" />
    <input type='button' id='btnSendFile' value='sendFile' />
    <output id="list"></output>
  </form>

Where using the file browse in type="file", I select a file to upload. When I click on btnSendFile, the file name of the selected file appears under name. However file variable is null when I pass it below. I need to access file object properties of file object.

I have a function that sends the file.

var file ;

function sendFile(file) {
var to = $('#to').get(0).value;
var filename = file.name;
var filesize = file.size;
var mime = file.type;

}

$('#btnSendFile').bind('click', function() {
 sendFile(file);
});

How do I get the file object in javascript where I need to file.name, file.size, and file.type? What should I assign variable file ?

UPDATE: Answer:

file= $("#file")[0].files[0];

@RayonDabre I want to know how to link the file just uploaded to file variable as file object with three properties (.name, .size, and .type) shown. — user914425
– user914425, Commented Apr 5, 2016 at 17:09

guest271314 · Accepted Answer · 2016-04-05 17:25:25Z

1

Pass this.previousElementSibling.files[0] or $("#file")[0].files[0] to sendFile

// var file;

function sendFile(file) {
  // var to = $('#to').get(0).value;
  var filename = file.name;
  var filesize = file.size;
  var mime = file.type;
  $("#list").html(filename + " " + filesize + " " + mime)
}

$("#btnSendFile").bind("click", function() {
  sendFile(this.previousElementSibling.files[0]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<form name='file_form' class="panel-body">
  <input type="file" id="file" name="file[]" />
  <input type='button' id='btnSendFile' value='sendFile' />
  <output id="list"></output>
</form>

edited Apr 5, 2016 at 17:25

answered Apr 5, 2016 at 17:18

guest271314

1

Sign up to request clarification or add additional context in comments.

1 Comment

user914425 Over a year ago

thank you. I just have to pass in $("#file")[0].files[0] to sendFile.

Hitesh Dabhi · Accepted Answer · 2016-04-05 17:22:01Z

0

Hello here is your answer

 <form name='file_form' class="panel-body">
        <input type="file" id="file" name="file[]"/>
        <input type='button' id='btnSendFile' value='sendFile' onclick="myFunction()" />
        <output id="list"></output>
      </form>

    <script>
    function myFunction(){
        var x = document.getElementById("file");
    var txt = "";

                var file = x.files[0];
                if ('name' in file) {
                    txt += "name: " + file.name + "<br>";
                }
                if ('size' in file) {
                    txt += "size: " + file.size + " bytes <br>";
                }
    document.getElementById ("list").innerHTML = txt;
    }
    </script>

edited Apr 5, 2016 at 17:22

answered Apr 5, 2016 at 17:15

Hitesh Dabhi

11812 bronze badges

2 Comments

user914425 Over a year ago

why do you use multiple?

Hitesh Dabhi Over a year ago

I see name="file[]" in your code so i think you need to upload more then 1 file

Collectives™ on Stack Overflow

HTML Javascript File Upload

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related