https://blog.csdn.net/qq_36687640/article/details/78551217

1、input type='file' 上傳文件時顯示文件名及上傳進(jìn)度

<input type="file" οnchange="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.οnabοrt=function () {?
layer.msg("文件上傳中斷,請重試")
?};?
fr.οnerrοr=function () {?
layer.msg("文件上傳出錯，請重試")?
};?
fr.οnlοad=function () { $(".progress1").hide();?
layer.msg("文件上傳成功")
?};?
fr.readAsDataURL(file);?
}?
}
</script>

---------------------?
作者：Eva_大黎?
來源：CSDN?
原文：https://blog.csdn.net/qq_36687640/article/details/78551217?
版權(quán)聲明：本文為博主原創(chuàng)文章，轉(zhuǎn)載請附上博文鏈接！

總結(jié)

以上是生活随笔為你收集整理的input type='file' 上传文件时显示文件名及上传进度的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。