js上传Excel文件

Posted 2022-01-20 songforu

一、问题

需要在项目里添加一个上传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）取消上传