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

效果图：

 

 

 

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

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

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

formData.append("file", $(".authorization")[0].files[0]);

var formData = new FormData();
formData.append("file", $(".authorization")[0].files[0]);
$.ajax({
    url:'/',
    type:'post',
    data:formData,
    processData: false,
    contentType: false,   // 不设置内容类型
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    success:function (res) {
        console.log(res)
        if (res.code == 1) {
            var arr=filePath.split('\\');
            var fileName=arr[arr.length-1];
            $(".showFileName").html(fileName);
            $(".showFileName").attr('href',res.data.src);
        } else if (res.code == -1) {
            layer.msg('上传失败，请重新上传！', {icon: 2, title: '提示'});
        }
    }
})