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

https://blog.youkuaiyun.com/qq_36687640/article/details/78551217

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>

--------------------- 
作者：Eva_大黎 
来源：优快云 
原文：https://blog.youkuaiyun.com/qq_36687640/article/details/78551217 
版权声明：本文为博主原创文章，转载请附上博文链接！