Question

我正在尝试使用ajax请求上传文件

function _(el) {
    return document.getElementById(el);
}

let Gmarker = '';

function uploadFile(id, marker, path) {

    var file = _(id).files[0];
    Gmarker = marker;
    // console.log(Gmarker)
    document.querySelector('.fa-times[data-marker =' + Gmarker + ']').style.display = 'inline-block';
    var formdata = new FormData();
    formdata.append("file", file);
    formdata.append("_token", '{{ csrf_token() }}');
    formdata.append('path', path);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("post", "/upload-file-ajax");
    ajax.send(formdata);
}


function progressHandler(event) {
    document.querySelector('.loaded_n_total[data-marker =' + Gmarker + ']').innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;
    var percent = (event.loaded / event.total) * 100;
    document.querySelector('.progressBar[data-marker=' + Gmarker + ']').value = Math.round(percent);
    document.querySelector('.status[data-marker=' + Gmarker + ']').innerHTML = Math.round(percent) + "% uploaded... please wait";
}

function completeHandler(event) {
    document.querySelector('.returned-file[data-marker=' + Gmarker + ']').value = event.target.responseText;
    document.querySelector('.status[data-marker=' + Gmarker + ']').innerHTML = "Upload Completed";
document.querySelector('.fa-times[data-marker =' + Gmarker + ']').style.display = 'none';
}

function errorHandler(event) {
    document.querySelector('.status[data-marker=' + Gmarker + ']').innerHTML = "Upload Failed";
    document.querySelector('.fa-times[data-marker =' + Gmarker + ']').style.display = 'none';
}

function abortHandler(event) {
    document.querySelector('.status[data-marker=' + Gmarker + ']').innerHTML = "Upload Aborted";
    document.querySelector('.fa-times[data-marker =' + Gmarker + ']').style.display = 'none';
}




 <div class="form-group col-md-3">
            <span>Cover Image <span class="text-danger"><strong>*</strong></span> </span>
            <input type="file"  onchange="uploadFile('cover','course-cover','covers')" id="cover" class="form-control" required accept="image/*">
            <progress  class="progressBar" data-marker="course-cover" value="0" max="100" style="width:200px;"></progress>
            <i class="fa fa-times" style="display: none" data-marker="course-cover" onclick="abortHandler()"></i>
            <h6 id="status" class="status" data-marker="course-cover"></h6>
            <p id="loaded_n_total" class="loaded_n_total" data-marker="course-cover"></p>
        </div>
        <div class="form-group col-md-3">
            <span>Intro Video <span class="text-danger"><strong>*</strong></span> </span>
            <input type="file" onchange="uploadFile('video','intro-video','videos')" id="video" class="form-control" data-marker="intro-video" data-path="videos" required accept="video/*">
            <progress  class="progressBar" data-marker="intro-video" value="0" max="100" style="width:200px;"></progress>
            <i class="fa fa-times" style="display: none" data-marker="intro-video" onclick="abortHandler()"></i>
            <h6 id="status" class="status" data-marker="intro-video"></h6>
            <p id="loaded_n_total" class="loaded_n_total" data-marker="intro-video"></p>
        </div>

它可以正常工作，但是如果用户正在上传视频并在另一个输入中上传图像，则第一个请求将被覆盖并继续上传，但是我丢失了返回的文件路径，因此会出现问题。所以我该怎么做而不禁用其他输入字段

使用ajax请求上传

0 个答案: