选择文件后自动进度条

时间:2017-04-13 09:07:48

标签: javascript php jquery html

我想在不点击按钮的情况下显示进度条。选择文件后(双击上传的文件后),应该运行进度条。但在我的代码中不起作用。请帮帮我..

我的代码:

function move() {
  var elem = document.getElementById("myBar"); 
  var width = 1;
  var id = setInterval(frame, 10);
  function frame() {
      if (width >= 100) {
          clearInterval(id);
      } else {
          width++; 
          elem.style.width = width + '%'; 
      }
  }
}
#myProgress {
    width: 100%;
    background-color: grey;
}
#myBar {
    width: 1%;
    height: 30px;
    background-color: green;
}
<div class="form-group">
	<table class="table table-striped table-bordered table-hover">
		<tr>
			<label style="text-align:left;" class="control-label col-md-3">Surat Permohonan<span class="required"> * </span></label>
			<div class="col-md-4">
				<td><input class="input-group" type="file" accept="image/*, .pdf" name="file" style="width:100%" required title="Masukan minimal satu file">
					<div id="myProgress">
					  <div id="myBar">10%</div>
					</div>
				</td>
			</div>
			<td><i class="fa fa-question-circle tooltips" data-html="true" data-original-title='<b>A. UNTUK PENDAFTAR INDIVIDU</b><br>1. Upload scan KTP yang masih berlaku. Apabila tidak ada bisa menggunakan SIM/Paspor yang masih berlaku.<br>2. Upload surat pengantar dari individu yang menerangkan ringkasan keperluan pengajuan proposal.<br><br><b>B. UNTUK PENDAFTAR ORGANISASI</b><br>1. Upload scan Surat Keterangan yang menerangkan legalitas/status hukum organisasi yang bersangkutan. Misal: SK dari kemenkumham tentang lembaga hukum, atau SK Rektor tentang organisasi kemahasiswaan.<br>2. Upload surat pengantar dari organisasi yang menerangkan ringkasan keperluan pengajuan proposal.<br><br><b>C. UNTUK PENDAFTAR PEMERINTAH</b><br>1. Upload surat pengantar resmi dari lembaga bersangkutan yang menerangkan ringkasan keperluan pengajuan proposal.<br><br><b>TRAVEL GRANT (Individu/organisasi/pemerintah)</b><br>Pilihan ini muncul ketika pemohon (dalam bentuk apapun) memilih pilihan "travel grant" pada kolom isian "jenis bantuan" pada menu "Lembar Isian Kegiatan". Adapun data yang harus diupload ketika opsi ini dipilih adalah:<br>1. Upload surat undangan dari pihak penyelenggara.<br>2. Upload dokumen yang menerangkan status pemohon; misal sebagai finalis festival film, atau sebagai pemenang lomba.<br>Apabila kedua dokumen di atas terlampir pada satu dokumen/surat yang sama, silakan upload file yang sama pada kedua pilihan yang disediakan.<br><br>Format dokumen yang diunggah dalam menu ini lebih baik disamakan dalam bentuk PDF.' data-container="body"></i></td>
		</tr>
	</table>
</div>

抱歉我的英语不好。我是PHP的新手。谢谢你的帮助。

0 个答案:

没有答案