input type='file' 上传文件时显示文件名及上传进度

来源：互联网发布：篱笆是什么意思网络语编辑：程序博客网时间：2024/06/01 08:13

1、input type='file' 上传文件时显示文件名及上传进度

<input type="file" onchange="showPreview(this)"><p class="show"></p>


<script>    function showPreview(source) {        var arrs = $(source).val().split('\\');        var filename=arrs[arrs.length-1];        $(".show").html(filename);        var file = source.files[0];        var total = file.size;        if(window.FileReader) {            var fr = new FileReader();            fr.onprogress = function(e) {                $(".progress1").show();                $("#Progress").val((e.loaded/total)*100)            };            fr.onabort=function () {                layer.msg("文件上传中断,请重试")            };            fr.onerror=function () {                layer.msg("文件上传出错，请重试")            };            fr.onload=function () {                $(".progress1").hide();                layer.msg("文件上传成功")            };            fr.readAsDataURL(file);        }    }</script>

阅读全文

0 0