zoukankan      html  css  js  c++  java
  • 自定义展示上传文件的名称,限制上传文件类型,并且获取物理路径

    效果图:

    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: '提示'});
            }
        }
    })
  • 相关阅读:
    (转)Silverlight从程序集读取xaml文件
    阻止jQuery事件冒泡
    如何避免JQuery Dialog的内存泄露(转)
    VS2010 好用的javascript扩展工具
    C#计时器
    Silverlight初体验之设置启动页面
    javascript调用asp.net后置代码方法
    应用程序工程文件组织重要性
    javascript中字符串转化为json对象
    jQuery EasyUI
  • 原文地址:https://www.cnblogs.com/ting-0424/p/13253663.html
Copyright © 2011-2022 走看看