Member Avatar for ana10192000

Hi,

I currently created a video uploader, but when the video is too big in size, the page seems to be not doing any until the video is completely uploaded. I want to put somewhat like "loading.. please wait" script until the video is not completely uploaded.

Thanks.

//Ana

  • 2 Contributors
  • 2 Replies
  • 122 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by ana10192000

Dani AI

Generated

The issue reported by is common: the browser appears stuck while a large file streams to the server. As suggested, handle the user feedback in client-side code. Two practical approaches are: (A) show an immediate overlay/spinner on form submit so the user knows the upload started, and (B) use HTML5/XHR2 upload progress events to show a real percent complete.

A minimal overlay technique (works in older browsers). Prevent the default submit, make the overlay visible, then submit after a tiny timeout so the browser repaints before navigation:

<form id="uploadForm" action="upload.php" method="post" enctype="multipart/form-data">...</form>
<div id="overlay" style="display:none">Uploading... please wait</div>

<script>
document.getElementById('uploadForm').addEventListener('submit', function(e){
  e.preventDefault();
  var overlay = document.getElementById('overlay');
  overlay.style.display = 'block';
  setTimeout(function(){ e.target.submit(); }, 20);
});
</script>

For a true progress bar, upload with XHR + FormData and use xhr.upload.onprogress to update percent. This works in modern browsers and gives realtime feedback and ETA for large files. See MDN for XMLHttpRequest.upload and FormData for details (XMLHttpRequest upload events, FormData).

Server-side notes: ensure PHP settings allow the file size (upload_max_filesize, post_max_size, max_execution_time) and that post_max_size is larger than upload_max_filesize (php.ini upload_max_filesize). Also check $_FILES['...']['error'] for codes (see file upload errors) and webserver limits (nginx client_max_body_size, Apache LimitRequestBody). If browser support is a concern for very large uploads, consider chunked/resumable libraries or an iframe fallback.

Recommended Answers

All 2 Replies

Member Avatar for Riverghost

I don't know if it's possible to do it with PHP.
Maybe animated gif image and then meta-header redirect, or text echo after upload.
But you can use Javascript to do this, just plugin with library - Jquery + BlockUI plugin should do the job.

Member Avatar for ana10192000

I tried javascript, buy it didn't work, I'll try that Jquery you suggested. Jquery is really a great tool, will at it, thanks.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.