javascript文件上传.doc,.pdf,.docx等格式

               1、 由于input的type="file"的默认属性比较丑,所以我们要隐藏input标签,这里用的是定位。

               2、通过class="enclosure-text"这个P标签来存放我们所上传后的文件名

               3、由于input是隐藏的,所以我们要加一个上传按钮,并添加点击事件去触发input的点击事件

HTML:

<div class="comment-right-float">
        <p class="enclosure-text"></p>
         <span class="btn-up-file" οnclick="$('#file-input').click()">上传</span>
          <form action="/ueditor/upload" method="post" id="submitFile">   <!-action为后台给的接口路径->
                   <input type="file" id="file-input" name="file-att" style="visibility: hidden;display: inline-block;width:                                                       2px;position: fixed;left: -1000px;" accept=".doc,.pdf,.docx" />    
           </form>
           <span class="file-tip">支持doc/docx/pdf等格式</span>
           <p class="warning-manage enclosure-null hide ">附件不能为空</p>
 </div>    

JS:

//    选择附件上传 
   var fileUrl;  //需要的url,在保存时后台需要这个地址
   var saveFileName;  //上传完成后截取的文件名
   $('#file-input').change(function(){ 
     //判断文件名是否为空,不为空时截取文件的名
     if($(this).val() == ''){ 
       return false; 
     }else{
         saveFileName=$(this).val().slice(12);
         $(".enclosure-text").text(saveFileName);
     }
     $('#submitFile').ajaxSubmit({ 
       type:'post', 
       dataType:'json', 
       success:function(result){ 
         //请求成功后后台会返回一个URL 地址,该地址是你最后保存时需要提交给后台的。
              fileUrl=result.url;
         //并且清空原文件,不然选择相同文件不能再次传 
//       $('#file-input').val(''); 
       }, 
       error:function(){ 
         //并且清空原文件,不然选择相同文件不能再次传 
//       $('#file-input').val(''); 
       } 
     }); 
})

  • 0
    点赞
  • 0
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 黑客帝国 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值