在javascript-ajax中提交表單時如何顯示進度條

Question

我已經制作了進度條和所有內容。 但是當我選擇文件上傳時出現問題，這意味着文件要上傳兩次，一次是在選擇文件時，一次是提交表單，這種糟糕的用戶體驗，所以我只想在提交時顯示進度條形式，我在后端使用 Django 和 ajax 召回

我的 HTML 表格

<div id="alert-box"></div>

                          <form  id="upload-form" action="." method="post" enctype="multipart/form-data">
                                {% csrf_token %}
                                <div id="progress-box" class="d-none">progress</div>

                                <div class="custom-file">

                                     <input type="file" class="custom-file-input" id="formGroupExampleInput2" required value="{{V_form.video}}">
                                     <label class="custom-file-label" for="formGroupExampleInput2">Choose Video...</label>
                                </div>

                                <div class="custom-file mt-5 mb-4">


                                       <input type="file" class="custom-file-input" id="file2" required value="{{V_form.video_poster}}">
                                     <label class="custom-file-label" for="formGroupExampleInput2">Choose Poster For Your Video...</label>

                                </div>

                                  <div class="d-flex justify-content-center my-3 px-3" >  <button class="btn-block btnn-color" id="heel" name="submit_v_form"> Upload</button></div>
                          </form>

javascript-Ajax

  const file_input_label = document.getElementById('file_input_label')

function input_filename(){
  file_input_label.innerHTML = input.files[0].name;
  console.log(file_input_label);
}


 const uploadForm = document.getElementById('upload-form')
//  const input = document.getElementById('formGroupExampleInput2')
 const input = document.getElementById('formGroupExampleInput2')
 console.log(input)

 const alertBox = document.getElementById('alert-box')
 const imageBox = document.getElementById('image-box')
 const progressBox = document.getElementById('progress-box')
 const canceleBox = document.getElementById('cancel-box')
 const canceleBtn = document.getElementById('cancel-btn')



 const csrf = document.getElementsByName('csrfmiddlewaretoken')

 // whenever choose th file something happen
 input.addEventListener('change', ()=>{
     progressBox.classList.remove('d-none')
     canceleBox.classList.remove('d-none')

     var filePath = input.value;

             var allowedTypes = /(\.mp4|\.mkv|\.avi|\.flv)$/i;

             if(!allowedTypes.exec(filePath)){
                 alertBox.innerHTML = `<div class="alert alert-danger" role="alert">Please Upload the valid file type</div>`
                 input.value = "";
                 return false;
             }

     const img_data = input.files[0]
     const url = URL.createObjectURL(img_data)
     console.log(img_data)

     const fd = new FormData()
     fd.append('csrfmiddlewaretoken', csrf[0].value)
     fd.append('video', img_data)

     $.ajax({
        type: 'POST',
        url: uploadForm.action,
        enctype: 'multipart/form-data',
        data: fd,
        beforeSend: function() {
            console.log('before')
            alertBox.innerHTML = ""
           // imageBox.innerHTML = ""
       },
        xhr: function() {
           const xhr = new window.XMLHttpRequest();
           xhr.upload.addEventListener('progress', e=>{
             // console.log(e)
             if (e.lengthComputable){
               const percent = e.loaded / e.total * 100
               console.log(percent);
               progressBox.innerHTML =
                                       `<div class="progress">
                                           <div class="progress-bar" role="progressbar" style="width: ${percent}%" aria-valuenow=" ${percent}" aria-valuemin="0" aria-valuemax="100"></div>
                                         </div>
                                         <p>${percent.toFixed(1)}%</p>`
             }
           })
           canceleBtn.addEventListener('click', ()=>{
             xhr.abort()
             setTimeout(()=>{
                 uploadForm.reset()
                 progressBox.innerHTML = ""
                 alertBox.innerHTML = ""
                 canceleBox.classList.add('d-none')
             }, 1000)
           })
           return xhr
       },
        success: function(response) {
           console.log(response)
           // imageBox.innerHTML = `<img src="${url}" width="300px">`

            // imageBox.innerHTML = `<video class="card" controls src="${url}">`
            alertBox.innerHTML = `<div class="alert alert-success" role="alert">Successfully uploaded your video. click upload to upload your video</div>`

        },
        error: function(error){
          console.log(error)
           alertBox.innerHTML = `<div class="alert alert-danger" role="alert">Ups something went wrong!</div>`
        },
        cache: false,
        contentType: false,
        processData: false,
     })
 })

Answer 1

我認為您在這里嘗試實現的是僅在 Ajax 提交時顯示進度條。 因此，您可以在以下每種操作方法中添加/刪除 display-none class。

input.addEventListener('change', () => {
    progressBox.classList.add('d-none') // Though this class is already added in html [seems redundant here].
    $.ajax({
        type: 'POST',
        beforeSend: function() { 
            progressBox.classList.remove('d-none')
        },
        success: function(response) {
            progressBox.classList.add('d-none')
        },
        error: function(error) {
            progressBox.classList.add('d-none')
        })
 }

希望這將是一種解決方法，但如果這能解決您的問題，請告訴我。