layui上传文件，删除“未选择文件”、筛选文件类型等详解

此次博文是针对上一篇文章内容的功能优化

上次代码：点我
根据测试人员给的建议做出修改

测试人员给了两个建议

1. 页面上传文件后提示了上传成功，实际没有上传成功，如图，提示上传成功后，文件名一闪而过
2. 筛选文件类型，打开文件显示框，仅显示excel文件

建议一，解决过程

为什么会一闪而过

• 这是因为，js利用了layui的上传文件功能，但是html部分写的代码没有用layui提供的方法，我是用input的方法实现的。
• 至于为什么没有用layui提供的button方法，是因为原型图的样式，必须样式统一。
• 每上传一次文件，就会刷新一次，upload.render，方法

解决方法

利用了label中的for方法：for 属性规定 label 与哪个表单元素绑定。

<style>
    label {
        position: relative;
    }
    #fileinp {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
    }
</style>
 <div class="layui-btn">
      <label for="fileinp">
        <input type="file" id="fileinp" name="file" value="2">
        <input type="button" value="选择文件" id="upload"><span id="textUpload">&nbsp未选择任何文件</span>
      </label>
 </div>

js部分

 //指定允许上传的文件类型
   upload.render({
         elem: '#fileinp'
         , url: '{:Url("uploadIccid")}'
         , accept: 'file' //普通文件
         , exts: 'xls|xlsx'
         , done: function (res) {
             if (res != '') {
                 $("#iccid_list").attr("value", res.dataIccid);//将后台返回的数据塞到隐藏域中
                 $("#textUpload").text(" " + res.fileName);//将文件名塞到span标签中
                 layer.msg('上传成功');
             }
         }
     });

网页样式：

成功保存文件名

建议二，解决过程

注意:此方法不可以使用layui的acceptMime的方法，因为html部分没有使用layui的方法
我的解决办法:

<div class="layui-btn">
 <label for="fileinp">
     <input type="file" id="fileinp" name="file" value="2" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel">
     <input type="button" value="选择文件" id="upload"><span id="textUpload">&nbsp未选择任何文件</span>
 </label>
</div>

使用了input中的accept方法，更多内容：点我
常用的限制类型：

后缀名       MIME名称
*.3gpp    audio/3gpp, video/3gpp
*.ac3    audio/ac3
*.asf       allpication/vnd.ms-asf
*.au           audio/basic
*.css           text/css
*.csv           text/csv
*.doc    application/msword    
*.dot    application/msword    
*.dtd    application/xml-dtd    
*.dwg    image/vnd.dwg    
*.dxf      image/vnd.dxf
*.gif            image/gif    
*.htm    text/html    
*.html    text/html    
*.jp2            image/jp2    
*.jpe       image/jpeg
*.jpeg    image/jpeg
*.jpg          image/jpeg    
*.js       text/javascript, application/javascript    
*.json    application/json    
*.mp2    audio/mpeg, video/mpeg    
*.mp3    audio/mpeg    
*.mp4    audio/mp4, video/mp4    
*.mpeg    video/mpeg    
*.mpg    video/mpeg    
*.mpp    application/vnd.ms-project    
*.ogg    application/ogg, audio/ogg    
*.pdf    application/pdf    
*.png    image/png    
*.pot    application/vnd.ms-powerpoint    
*.pps    application/vnd.ms-powerpoint    
*.ppt    application/vnd.ms-powerpoint    
*.rtf            application/rtf, text/rtf    
*.svf           image/vnd.svf    
*.tif         image/tiff    
*.tiff       image/tiff    
*.txt           text/plain    
*.wdb    application/vnd.ms-works    
*.wps    application/vnd.ms-works    
*.xhtml    application/xhtml+xml    
*.xlc      application/vnd.ms-excel    
*.xlm    application/vnd.ms-excel    
*.xls           application/vnd.ms-excel    
*.xlt      application/vnd.ms-excel    
*.xlw      application/vnd.ms-excel    
*.xml    text/xml, application/xml    
*.zip            aplication/zip    
*.xlsx     application/vnd.openxmlformats-officedocument.spreadsheetml.sheet