效果图:
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有部分是公共的,就不粘贴了。
本来想纯前端实现上传文件以及预览,但是浏览器不允许访问磁盘中的文件,不能实现预览
所以最后还是走了接口上传