„JavaScript“ naudojimas failų dydžio apribojimams ir failų įkėlimo eigos atsiliepimams įgyvendinti

Failų įkėlimo apribojimų ir eigos juostos įgyvendinimas

Šis scenarijus įkelia pažangos ataskaitas ir įgyvendina failo dydžio apribojimus naudodamas XMLHttpRequest ir gryną JavaScript. Taip pat garantuojamas našumo gerinimas ir tinkamas klaidų valdymas.

// HTML form for file upload
<form id="uploadForm">
  <input type="file" id="fileInput" accept="image/*" required />
  <div id="progressContainer" style="display: none;">
    <progress id="uploadProgress" value="0" max="100"></progress>
    <span id="progressText"></span>
  </div>
  <button type="submit">Upload</button>
</form>
// JavaScript for file upload handling
<script>
document.getElementById('uploadForm').addEventListener('submit', function(event) {
  event.preventDefault(); // Prevent default form submission
  const fileInput = document.getElementById('fileInput');
  const file = fileInput.files[0]; // Get the selected file
  const maxSize = 2 * 1024 * 1024; // Maximum file size: 2MB
  if (file.size > maxSize) { // Check if file exceeds size limit
    alert('File size exceeds 2 MB. Please select a smaller file.');
    return; // Abort if the file is too large
  }
  const formData = new FormData(); // Prepare form data for upload
  formData.append('file', file);
  const progressContainer = document.getElementById('progressContainer');
  const uploadProgress = document.getElementById('uploadProgress');
  const progressText = document.getElementById('progressText');
  progressContainer.style.display = 'block'; // Show progress bar
  const xhr = new XMLHttpRequest(); // Create an XMLHttpRequest for upload
  xhr.open('POST', '/upload', true);
  xhr.upload.addEventListener('progress', function(e) {
    if (e.lengthComputable) { // Update progress
      const percentComplete = (e.loaded / e.total) * 100;
      uploadProgress.value = percentComplete;
      progressText.textContent = Math.round(percentComplete) + '% uploaded';
    }
  });
  xhr.onload = function() { // Handle the response
    if (xhr.status === 200) {
      console.log('Upload complete:', JSON.parse(xhr.responseText));
    } else {
      console.error('Upload failed:', xhr.statusText);
    }
  };
  xhr.send(formData); // Start file upload
});
</script>

Alternatyvus failų įkėlimo sprendimas naudojant Fetch API

Šis sprendimas užtikrina suderinamumą su dabartinėmis žiniatinklio technologijomis, įdiegdamas failų įkėlimo apribojimus ir teikdamas pažangos grįžtamąjį ryšį šiuolaikinėms naršyklėms per Fetch API.

// HTML remains the same
// JavaScript with Fetch API
<script>
document.getElementById('uploadForm').addEventListener('submit', async function(event) {
  event.preventDefault();
  const fileInput = document.getElementById('fileInput');
  const file = fileInput.files[0];
  const maxSize = 2 * 1024 * 1024;
  if (file.size > maxSize) {
    alert('File size exceeds 2 MB. Please select a smaller file.');
    return;
  }
  const progressContainer = document.getElementById('progressContainer');
  const uploadProgress = document.getElementById('uploadProgress');
  const progressText = document.getElementById('progressText');
  progressContainer.style.display = 'block';
  const formData = new FormData();
  formData.append('file', file);
  // Use fetch for upload
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload', true);
  xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) {
      const percentComplete = (e.loaded / e.total) * 100;
      uploadProgress.value = percentComplete;
      progressText.textContent = Math.round(percentComplete) + '% uploaded';
    }
  };
  xhr.send(formData);
});
</script>

Dažniausiai užduodami klausimai apie „JavaScript“ failų įkėlimą

1. Kaip apriboti failo dydį „JavaScript“?
2. Prieš pradėdami įkėlimo procesą, įsitikinkite, kad file.size atributas „JavaScript“ yra patikrintas, kad būtų nustatytas failo dydžio apribojimas. Tiesiog sustabdykite formos pateikimą, jei dydis viršija jūsų limitą.
3. Ar galiu naudoti Fetch API failams įkelti?
4. tikrai, fetch() gali būti naudojamas failams įkelti; tačiau sekti pažangą tampa sunkesnė. Reikėtų daugiau sprendimų nei 2.
5. Kaip įkėlimo metu parodyti eigos juostą?
6. Stebėdami xhr.upload.addEventListener('progress') įvykis, kuriame pateikiama informacija apie įkėlimo eigą, galite rodyti eigos juostą.
7. Kodėl kliento pusės failo dydžio patvirtinimas yra svarbus?
8. Vartotojai gauna greitą atsakymą per kliento pusės failo dydžio patvirtinimą, todėl išvengiama nereikalingų serverio užklausų dėl didelių failų. Bet už security, visada suporuokite jį su serverio patvirtinimu.
9. Kas atsitiks, jei failo įkėlimas nepavyks?
10. The onload arba onerror įvykis 2 Objektas gali būti naudojamas siekiant nustatyti įkėlimo klaidas ir atitinkamai įspėti vartotojus.

Failų įkėlimo proceso pabaiga

Norint užtikrinti sklandžią naudotojo patirtį, labai svarbu pateikti realiojo laiko pažangos indikaciją ir apriboti įkeliamų failų dydį. Tai garantuoja, kad vartotojai žinos apie savo įkėlimų būseną, ir neleidžia dideliems failams perkrauti sistemas.

„JavaScript“ gali būti naudojamas šioms strategijoms taikyti, o tai optimizuos kūrėjų saugumą ir našumą. Eigos juosta pagerina naudotojų įsitraukimą, o dydžio apribojimai apsaugo nuo tam tikrų pavojų. Šių rekomenduojamų praktikų naudojimas padeda sukurti efektyvias ir lengvai naudojamas žiniatinklio programas.