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

效果图:

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

 

 

 

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有部分是公共的,就不粘贴了。

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

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

 

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

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

上一篇:elementui el-upload清空上传列表


下一篇:Python中的一些小技巧