Reputation: 11

Upload an Excel File using Jquery

I want to upload an Excel file using Jquery through RestEasy Service which consumes multipart/form-data. Whether I want to use Ajax for File upload or simple Jquery/Javascript is more enough. If I want to use only Ajax means, what kind of content-type do I have to post for upload?

This is my HTML & Jquery Code.

<script type="Javascript">
    $(document).ready(function () {
        //var filename = document.getElementById("uploadedFile").value;
        var filename = $("#uploadedFile").val();
        //alert(filename);
        jQuery("#Upload").click(function () {
            $.ajax({
                url: 'service url',
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                // enctype: 'multipart/form-data',
                data: {
                    file: filename
                },
                cache: false,
                success: function (data) {
                    alert('success');
                    return false;
                },
                error: function (data, status) {
                    alert("failue");
                    alert(status);
                }
            });
        });
    });
</script>

<input type="file"  name="uploadedFile" id="uploadedFile" size="30" ><br><br>
<input type="button" id="Upload" name="Upload" value="Upload"  style="width:72px;height:23px;">

Upvotes: 0

Answers (5)

Du-Lacoste

Reputation: 12787

You can get it done by both jQuery and HTML. Refer the coding below. It is in HTML.

HTML

<form id="" enctype="multipart/form-data" method="POST" name=""
      action='URL.do'>
    <table width="100%" height="0" border="0" style="border-collapse: collapse" cellpadding="0" cellspacing="0">
        <tr>
            <td>Select File to Upload&nbsp;</td>
            <td valign="top" colspan="3">
                <input type="file" name="excelFile" id="excelFile"
                       accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
            </td>
        </tr>

        <tr>
            <td align="left">

                <input type="submit" class="buttons" onclick=""
                       id="btnUpload" name="btnUpload" value="Submit"/>
            </td>
        </tr>

    </table>

</form>

Upvotes: 1

Hariprakash Sambath

Reputation: 179

You can use XMLHttpRequest and FormData for uploading a file,

$('#input-file').change(function() {

      var url = '/back-end-url';
      var form_data = new FormData();
      var xhr = new XMLHttpRequest();

      $.each(this.files, function (key, value) {
          form_data.append('file', value)
      })

      xhr.open('POST', url, true)
      xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest")
      xhr.send(form_data)

      xhr.onreadystatechange(function() {
          if(xhr.readyState == XMLHttpRequest.DONE) {
               var res = JSON.parse(xhr.responseText)
          }
      })

})

You can get & handle the file in back-end.

Upvotes: 0

Simon

Reputation: 629

If you are using HTML5, this should be easy.

This is how I did with the file upload

HTML,

<form method="POST" enctype="multipart/form-data"
      action="/file/upload" style="display: none">
      <input type="file" name="file"  multiple="multiple" id="uploadImages">
</form>

JS,

$('#uploadImages').on('change', function (){
            var formData = new FormData();
            for(var i = 0; i < this.files.length; i++){
                formData.append('file', this.files[i]);

                $.ajax({
                    url : '/file/upload',
                    type : 'post',
                    data : formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success : function () {
                        alert("upload successfully")
                    }
                })

            }
        }
        $('form')[0].reset();
    })

Upvotes: 1