js上傳Excel文件

一、問題

需要在項目里添加一個上傳excel文件的功能，因為其他同樣的后台里面有上傳文件的功能，第一反應就是想着直接用。了解了一下發現它是利用bootstrap的fileinput實現的，但是我怎么都不能把fileinput插件給加到java的項目里，然后就只能自己用js實現吧。好像也沒什么特別的需求。

1）原本的樣式不好看，需要和項目一致

2）只上傳xls和xlxs的文件

二、代碼

<input type="file" id="file" name="myfile" style="display: none" />
<input type="text" id="filename" style="display:none"></span>
<input type="button" onclick="upload()" value="選擇文件上傳" />

 function UpladFile(fileObj) {
                var form = new FormData(); // FormData 對象
                form.append("file", fileObj); // 文件對象
                $.ajax({
                    url: 'xxx',                      //url地址
                    type: 'POST',                 //上傳方式
                    data: form,                   // 上傳formdata封裝的數據
                    dataType: 'JSON',
                    cache: false,                  // 不緩存
                    processData: false,        // jQuery不要去處理發送的數據
                    contentType: false,         // jQuery不要去設置Content-Type請求頭
                    success:function (data) {           //成功回調
                        console.log(data);
                    },
                   error:function (data) {           //失敗回調
                        console.log(data);
                    }
                }); 
             }

    function upload() {
        $("#file").click();
        $('#file').change(function (e) {
         var fileName = e.target.files[0];//js 獲取文件對象
         if(fileName !== undefined){
           var file_typename =   fileName.name.substring(fileName.name.lastIndexOf('.'));
           if (file_typename === '.xlsx' || file_typename === '.xls') {
            $("#filename").css("display","block");
            $("#filename").val(fileName.name);
           UpladFile(fileName);
           }else {
            console.log("請選擇正確的文件類型！")
            } 
         }else{
       console.log("請選擇正確的文件！")
        }
    }                                

三、可以考慮的地方

　　1）控制上傳文件大小

　　2）取消上傳