JS上传文件时显示进度条
这次给大家带来JS上传文件时显示进度条，JS上传文件时显示进度条的注意事项有哪些，下面就是实战案例，一起来看一下。
在php.ini修改需要的大小：
upload_max_filesize = 8M
post_max_size = 10M
memory_limit = 20M
<!DOCTYPE html>
<html>
<head>
<title>原生JS大文件显示进度条</title>
<meta charset="UTF-8">
<style type="text/css">
#parent{position: relative;width: 500px;height:20px;border:1px solid #ccc;display: none;border-radius:20px}
#child{position: absolute;width:0%;height:20px;background: #5FB878;display: none;line-height: 20px;color: #ffffff;font-size: 12px;border-radius:20px}
</style>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
</script>
</head>
<body>
<form action="" method="post">
<p id="parent">
<p id="child"></p>
</p>
<p>上传文件:<input type="file" name="file"></p>
<p><input type="submit" value="提交" id="submit"></p>
</form>
<script type="text/javascript">
var oForm = document.getElementsByTagName('form')[0];
var oSubmit = $('submit');
//如果多个人同时提交这个表单的时候，由于是异步的请求，互不影响
oSubmit.onclick = function(){
try{
var xhr = new XMLHttpRequest();
}catch(e){
var xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
xhr.upload.onprogress = function(e){
var ev = e || window.event;
var percent = Math.floor((ev.loaded / ev.total)*100);
// console.log(percent);
//将百分比显示到进度条
$('parent').style.display = 'block';
$('child').style.display = 'block';
//将上传进度的百分比显示到child里面
$('child').style.width = percent+'%';
$('child').style.textAlign = 'center';
$('child').innerHTML = percent+'%';
//判断如果百分比到达100%时候，隐藏掉
if(percent==100){
$('parent').style.display = 'none';
$('child').style.display = 'none';
}
}
xhr.open('post','progress.php',true);
var form = new FormData(oForm);
xhr.send(form);
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
eval("var obj ="+xhr.responseText);
if(obj.status){
alert('上传成功');
}else{
alert('上传失败');
}
}
}
//阻止表单提交
return false;
}
</script>
</body>
</html><?php
//开始上传
//注意：文件是windows系统的文件，采用的gbk编码，php文件使用的是utf-8编码
//我们不能直接修改文件的编码，只能临时修改一下php的编码
$dst_file = $_FILES['file']['name'];
$dst_file = iconv('utf-8', 'gbk', $dst_file);
if(move_uploaded_file($_FILES['file']['tmp_name'],$dst_file)){
$data['status'] = 1;
}else{
$data['status'] = 0;
}
echo json_encode($data);相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Atas ialah kandungan terperinci JS上传文件时显示进度条. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1386
52
WebSocket dan JavaScript: teknologi utama untuk melaksanakan sistem pemantauan masa nyata
Dec 17, 2023 pm 05:30 PM
WebSocket dan JavaScript: Teknologi utama untuk merealisasikan sistem pemantauan masa nyata Pengenalan: Dengan perkembangan pesat teknologi Internet, sistem pemantauan masa nyata telah digunakan secara meluas dalam pelbagai bidang. Salah satu teknologi utama untuk mencapai pemantauan masa nyata ialah gabungan WebSocket dan JavaScript. Artikel ini akan memperkenalkan aplikasi WebSocket dan JavaScript dalam sistem pemantauan masa nyata, memberikan contoh kod dan menerangkan prinsip pelaksanaannya secara terperinci. 1. Teknologi WebSocket
Sebab dan penyelesaian untuk susun atur desktop dikunci
Feb 19, 2024 pm 06:08 PM
Apakah yang berlaku apabila susun atur desktop dikunci apabila menggunakan komputer, kadangkala kita mungkin menghadapi situasi di mana reka letak desktop dikunci. Masalah ini bermakna kita tidak boleh bebas melaraskan kedudukan ikon desktop atau menukar latar belakang desktop. Jadi, apa sebenarnya yang berlaku apabila ia mengatakan bahawa susun atur desktop dikunci? 1. Fahami reka letak desktop dan fungsi penguncian Pertama, kita perlu memahami dua konsep susun atur desktop dan penguncian desktop. Reka letak desktop merujuk kepada susunan pelbagai elemen pada desktop, termasuk pintasan, folder, widget, dsb. kita boleh bebas
Cara membuat sambungan desktop jauh memaparkan bar tugas pihak lain
Jan 03, 2024 pm 12:49 PM
Terdapat ramai pengguna yang menggunakan Sambungan Desktop Jauh Ramai pengguna akan menghadapi beberapa masalah kecil apabila menggunakannya, seperti bar tugas pihak lain yang tidak dipaparkan penyelesaian di bawah. Cara untuk memaparkan bar tugas pihak lain semasa Sambungan Desktop Jauh: 1. Pertama, klik "Tetapan". 2. Kemudian buka "Peribadikan". 3. Kemudian pilih "Taskbar" di sebelah kiri 4. Matikan pilihan Hide Taskbar dalam gambar.
Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP
Jan 05, 2024 pm 06:08 PM
Tutorial JavaScript: Bagaimana untuk mendapatkan kod status HTTP, contoh kod khusus diperlukan: Dalam pembangunan web, interaksi data dengan pelayan sering terlibat. Apabila berkomunikasi dengan pelayan, kami selalunya perlu mendapatkan kod status HTTP yang dikembalikan untuk menentukan sama ada operasi itu berjaya dan melaksanakan pemprosesan yang sepadan berdasarkan kod status yang berbeza. Artikel ini akan mengajar anda cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan menyediakan beberapa contoh kod praktikal. Menggunakan XMLHttpRequest
Bagaimana untuk menyemak direktori semasa di Linux?
Feb 23, 2024 pm 05:54 PM
Dalam sistem Linux, anda boleh menggunakan perintah pwd untuk memaparkan laluan semasa. Perintah pwd ialah singkatan dari PrintWorkingDirectory dan digunakan untuk memaparkan laluan direktori kerja semasa. Masukkan arahan berikut dalam terminal untuk memaparkan laluan semasa: pwd Selepas melaksanakan arahan ini, terminal akan memaparkan laluan penuh direktori kerja semasa, seperti: /home/user/Documents. Selain itu, anda juga boleh menggunakan beberapa pilihan lain untuk meningkatkan kefungsian perintah pwd Contohnya, pilihan -P boleh dipaparkan
Bagaimana untuk memaparkan kata laluan wifi kod QR? Adalah disyorkan untuk mengimbas kata laluan wifi di WeChat dalam masa 3 saat.
Feb 20, 2024 pm 01:42 PM
Anda tidak perlu memasukkan kata laluan WIFI dengan kerap, jadi adalah perkara biasa untuk melupakannya Hari ini saya akan mengajar anda cara paling mudah untuk mencari kata laluan WIFI anda sendiri. Ia boleh dilakukan dalam masa 3 saat. Untuk menyemak kata laluan WIFI, gunakan WeChat untuk mengimbasnya Premis kaedah ini ialah: mesti ada telefon bimbit yang boleh menyambung ke WIFI. Okay, mari mulakan tutorial: Langkah 1. Kami masukkan telefon, tarik ke bawah dari bahagian atas telefon, bawa ke atas bar status, dan ikon WIFI Langkah 2. Tekan lama ikon WIFI untuk memasukkan tetapan WLAN tekan ikon WIFI Langkah 3. Klik Bersambung Masukkan nama WIFI rumah anda, klik Kongsi Kata Laluan, dan kod QR akan muncul di Langkah 4 untuk berkongsi kata laluan WIFI, kami mengambil tangkapan skrin dan menyimpan kod QR ini; , tekan lama ikon WeChat pada desktop dan klik Imbas
Samsung akan menyediakan paparan untuk set kepala MR Microsoft, dan peranti itu dijangka lebih ringan dan mempunyai paparan yang lebih jelas
Aug 10, 2024 pm 09:45 PM
Baru-baru ini, Samsung Display dan Microsoft menandatangani perjanjian kerjasama yang penting. Menurut perjanjian itu, Samsung Display akan membangunkan dan membekalkan ratusan ribu panel OLEDoS untuk peranti yang dipasang di kepala realiti campuran (MR) kepada Microsoft sedang membangunkan peranti MR untuk kandungan multimedia seperti permainan dan filem ini Ia akan dilancarkan selepas spesifikasi OLEDoS ditentukan, terutamanya dalam bidang komersial, dan dijangka akan dihantar seawal 2026. Teknologi OLEDoS (OLED on Silicon) OLEDoS ialah teknologi paparan baharu yang mendepositkan OLED pada substrat silikon Berbanding dengan substrat kaca tradisional, ia lebih nipis dan mempunyai piksel yang lebih tinggi. Paparan OLEDoS dan paparan biasa
win7 tidak boleh ditutup seperti biasa dan terus menunjukkan bahawa ia ditutup
Jan 06, 2024 pm 07:41 PM
Sistem win7 adalah sistem yang sangat baik yang disukai oleh kebanyakan pengguna komputer. Walau bagaimanapun, baru-baru ini ramai pengguna sistem win7 telah melaporkan bahawa komputer mereka tidak boleh ditutup dan terus menunjukkan bahawa mereka sedang ditutup! Hari ini, editor akan membawakan anda penyelesaian kepada masalah yang tidak dapat ditutup oleh Win7. Mari kita lihat. Penyelesaian kepada masalah yang Windows 7 tidak boleh ditutup dan terus menunjukkan bahawa ia dimatikan: Pelbagai sebab dan penyelesaian: Kaedah 1: 1. Mula-mula semak jika terdapat sebarang perisian yang tidak ditutup, keluar darinya, dan kemudian cuba tutup semula " dan pilih "Proses". 3. Anda boleh memerhatikan semua yang berjalan pada komputer semasa proses itu.
