Upload an Excel File using Jquery

Question

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;">

AFAIK file upload is not possible using AJAX, although you can check malsup.com/jquery/form plugin for jquery which can upload file in ajax style. — Sachin Gorade
– Sachin Gorade, Commented Apr 10, 2013 at 9:42

Simon · Accepted Answer · 2017-04-01 03:22:13Z

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();
    })

Du-Lacoste · Accepted Answer · 2018-05-16 12:05:50Z

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>

Shikiryu · Accepted Answer · 2013-04-10 10:02:53Z

0

If you want to upload without any page reload with JS and fallback, you can use http://www.uploadify.com/ or http://www.plupload.com/

I tested and validated both of them :)

answered Apr 10, 2013 at 10:02

Shikiryu

10.3k9 gold badges53 silver badges76 bronze badges

2 Comments

Lakshman Over a year ago

uploadify and plupload uses HTML5. But am using normal HTML. @Shikiryu

Shikiryu Over a year ago

@Lakshman As I said, they use fallback. You can indicate which method you want or not. For example, plupload can have HTML4 & 5 (or flash, etc). Uploadify doesn't have that many example and I didn't test it in a HTML4 context so I don't know but I'm pretty sure they use the same type of fallback.

f4r4 · Accepted Answer · 2013-04-10 13:13:14Z

0

Use ajaxfileupload.js I have done multiple file uploads using this, its a great js library, you will have total control over your uploads !

https://code.google.com/p/my-web-js/downloads/detail?name=ajaxfileupload.js&can=2&q=

http://www.phpletter.com/Our-Projects/AjaxFileUpload/

answered Apr 10, 2013 at 13:13

f4r4

5731 gold badge9 silver badges19 bronze badges

Comments

Hariprakash Sambath · Accepted Answer · 2017-12-20 10:19:03Z

0

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.

answered Dec 20, 2017 at 10:19

Hariprakash Sambath

1791 silver badge5 bronze badges

Collectives™ on Stack Overflow

Upload an Excel File using Jquery

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related