首页 > Web开发 > 详细

自定义展示上传文件的名称,限制上传文件类型,并且获取物理路径

时间:2020-07-06 11:35:08      阅读:75      评论:0      收藏:0      [点我收藏+]

效果图:

技术分享图片

 

 

 

HTML

  <div>
                                    <div>请上传</div>
                                   
                                    <p style="position:relative;" class="file">*仅支持JPG、PNG、GIF图片格式    
                                        <input type="file" name="accredit" class="authorization"  onchange="$(‘.showFileName1‘).attr(‘href‘,$(‘.authorization‘).val())">
                                        <input class="shows font12px tc" type="button" value="点击上传">
                                        {if condition="$reset eq ‘1‘ and $user_message[‘accredit‘]!=‘‘ "}
                                        <a herf="{$user_message[‘accredit‘]}">下载</a>
                                        {/if}
                                    </p>
                                   <div class="tc" style="margin-top: 15px;"> <a href="" class="showFileName"></a></div>
                                   </div>

 

JS

 $(‘.authorization‘).click(function(){
        $(".file").on("change","input[type=‘file‘]",function(){
        var filePath=$(this).val();
        if (!/.(gif|jpg|jpeg|png|GIF|JPG|pdf)$/.test(filePath)) {
            layer.msg(‘文件类型必须是.gif,jpeg,jpg,png,pdf‘, { icon: 0, time: 2000, title: ‘提示‘ });
            $(".showFileName1").html("");
            return false;
        }else{
            var arr=filePath.split(‘\\‘);
            var fileName=arr[arr.length-1];
            $(".showFileName1").html(fileName);
            $(".showFileName1").attr(‘href‘,fileName);
            }
        })
    })

css有部分是公共的,就不粘贴了。

本来想纯前端实现上传文件以及预览,但是浏览器不允许访问磁盘中的文件,不能实现预览

技术分享图片

 

 所以最后还是走了接口上传

自定义展示上传文件的名称,限制上传文件类型,并且获取物理路径

原文:https://www.cnblogs.com/ting-0424/p/13253663.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!