码迷,mamicode.com
首页 > Web开发 > 详细

js上传Excel文件

时间:2019-06-18 12:34:45      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:成功   插件   efi   error:   last   cache   var   exce   tst   

一、问题

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

 

js上传Excel文件

标签:成功   插件   efi   error:   last   cache   var   exce   tst   

原文地址:https://www.cnblogs.com/songForU/p/11044337.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!