JavaScripti kasutamine failisuuruse piirangute ja failide üleslaadimise edenemise tagasiside rakendamiseks

Failide üleslaadimise piirangute ja edenemisriba rakendamine

See skript laadib üles edenemisaruanded ja rakendab failisuuruse piiranguid, kasutades XMLHttpRequest ja puhast JavaScripti. Samuti on tagatud jõudluse parandamine ja asjakohane vigade käsitlemine.

// 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>

Alternatiivne faili üleslaadimise lahendus Fetch API abil

See lahendus tagab ühilduvuse praeguste veebitehnoloogiatega, rakendades failide üleslaadimise piiranguid ja andes Fetch API kaudu kaasaegsetele brauseritele tagasisidet edenemise kohta.

// 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>

JavaScripti failide üleslaadimise kohta korduma kippuvad küsimused

1. Kuidas JavaScriptis faili suurust piirata?
2. Enne üleslaadimisprotsessi alustamist veenduge, et file.size faili suuruse piirangu seadmiseks kontrollitakse JavaScripti atribuuti. Lihtsalt peatage vormi esitamine, kui suurus on suurem kui teie limiit.
3. Kas ma saan failide üleslaadimiseks kasutada Fetch API-t?
4. Tõepoolest, fetch() saab kasutada failide üleslaadimiseks; edusammude jälgimine muutub aga keerulisemaks. See nõuaks rohkem lahendusi kui 2.
5. Kuidas kuvada üleslaadimise ajal edenemisriba?
6. Jälgides xhr.upload.addEventListener('progress') sündmus, mis annab teavet üleslaadimise edenemise kohta, saate kuvada edenemisriba.
7. Miks on kliendipoolne failisuuruse kinnitamine oluline?
8. Kasutajad saavad kiire vastuse kliendipoolse failisuuruse kontrollimise kaudu, mis väldib suurte failide jaoks asjatuid serveripäringuid. Aga selleks security, siduge see alati serveripoolse valideerimisega.
9. Mis juhtub, kui faili üleslaadimine ebaõnnestub?
10. The onload või onerror aasta sündmus 2 Objekti saab kasutada üleslaadimise tõrgete tuvastamiseks ja kasutajate hoiatamiseks.

Failide üleslaadimise protsessi lõpetamine

Reaalajas edenemise näit ja üleslaaditavate failide suuruse piiramine on sujuva kasutuskogemuse tagamiseks üliolulised. See tagab, et kasutajad on oma üleslaadimiste olekust teadlikud ja hoiab suuri faile süsteemide ülekoormamise eest.

Nende strateegiate rakendamiseks saab kasutada JavaScripti, mis optimeerib arendajate turvalisust ja jõudlust. Edenemisriba parandab kasutaja seotust ja suurusepiirangud kaitsevad teatud ohtude eest. Nende soovitatavate tavade kasutamine aitab luua tõhusaid ja hõlpsasti kasutatavaid veebirakendusi.