在wordpress错误中以联系人形式7上传文件时的进度条

Question

我在Wordpress的Contact Form 7插件中上传文件时找到了这段很棒的代码来启用进度条。原始来源：HERE

<script type="text/javascript">
        jQuery(document).ready(function(){  
    var dropbox;  

    dropbox = document.getElementById("dropbox");  
    dropbox.addEventListener("dragenter", dragenter, false);  
    dropbox.addEventListener("dragleave", dragleave, false);  
    dropbox.addEventListener("dragover", dragover, false);  
    dropbox.addEventListener("drop", drop, false);  

    function defaults(e){
       e.stopPropagation();  
       e.preventDefault();  
    }
    function dragenter(e) {  
       jQuery(this).addClass("active");
       defaults(e);
    }  

    function dragover(e) { 
       defaults(e);
    }  
    function dragleave(e) {  
       jQuery(this).removeClass("active");
       defaults(e);
    }  

    function drop(e) {  
       jQuery(this).removeClass("active");
       defaults(e);
       var dt = e.dataTransfer;  
       var files = dt.files;  

       handleFiles(files,e);  
    }  
   jQuery(document).on('change', '#fileElem', function(){
    handleFiles(this.files)});
    handleFiles = function (files,e){

        var imageType = /image.*/;  
        var file = files[0];

        var info = '<div class="preview active-win"><div class="preview-image"><img ></div><div class="progress-holder"><span id="progress"></span></div><span class="percents"></span><div style="float:left;">Uploaded <span class="up-done"></span> KB of '+parseInt(file.size / 1024)+' KB</div>';

        jQuery(".upload-progress").show("fast",function(){
            jQuery(".upload-progress").html(info); 
            uploadFile(file);
        });

  }

  uploadFile = function(file){
    // check if browser supports file reader object 
    if (typeof FileReader !== "undefined"){
    //alert("uploading "+file.name);  
    reader = new FileReader();
    reader.onload = function(e){
        //alert(e.target.result);
        jQuery('.preview img').attr('src',e.target.result).css("width","70px").css("height","70px");
    }
    reader.readAsDataURL(file);

    xhr = new XMLHttpRequest();
    xhr.open("post", "ajax_fileupload.php", true);

    xhr.upload.addEventListener("progress", function (event) {
        console.log(event);
        if (event.lengthComputable) {
            jQuery("#progress").css("width",(event.loaded / event.total) * 100 + "%");
            jQuery(".percents").html(" "+((event.loaded / event.total) * 100).toFixed() + "%");
            jQuery(".up-done").html((parseInt(event.loaded / 1024)).toFixed(0));
        }
        else {
            alert("Failed to compute file upload length");
        }
    }, false);

    xhr.onreadystatechange = function (oEvent) {  
      if (xhr.readyState === 4) {  
        if (xhr.status === 200) {  
          jQuery("#progress").css("width","100%");
          jQuery(".percents").html("100%");
          jQuery(".up-done").html((parseInt(file.size / 1024)).toFixed(0));
           jQuery(".upload-progress").hide();
        } else {  
          alert("Error"+ xhr.statusText);  
        }  
      }  
    };  

    // Set headers
    xhr.setRequestHeader("Content-Type", "multipart/form-data");
    xhr.setRequestHeader("X-File-Name", file.fileName);
    xhr.setRequestHeader("X-File-Size", file.fileSize);
    xhr.setRequestHeader("X-File-Type", file.type);
    xhr.send(file);

    }else{
        alert("Your browser doesnt support FileReader object");
    }       
    }
    });
    </script>

<style>
.active{ background : #B4F9AC; font-size: 15px; box-shadow : 0px 0px 5px 6px #ccc; }
.progress-holder{ width: 300px; padding: 2px; background: #CCCCCC; border-radius: 3px; float: left; margin-top: 4px; margin-right: 5px; }
#progress{ height: 6px; display:block; width: 0%; border-radius: 2px; background: -moz-linear-gradient(center top , #13DD13 20%, #209340 80%) repeat scroll 0 0 transparent; /* IE hack */  background: -ms-linear-gradient(bottom, #13DD13, #209340); /* chrome hack */  background-image: -webkit-gradient(linear, 20% 20%, 20% 100%, from(#13DD13), to(#209340)); /* safari hack */  background-image: -webkit-linear-gradient(top, #13DD13, #209340); /* opera hack */  background-image: -o-linear-gradient(#13DD13,#209340); box-shadow:3px 3px 3px #888888; }
.preview{ border: 1px solid #CDCDCD; width: 450px; padding: 10px; height:auto;  overflow: auto; color: #4D4D4D; float: left; box-shadow:3px 3px 3px #888888; border-radius: 2px; }
.percents{ float: right; }
.preview-image{ box-shadow: 3px 3px 3px #888888; width: 70px; height: 70px; float: left; margin-right: 10px; }
.file-info{ height: 50px; float: left; width: auto; margin-bottom: 10px; border: 1px solid blue; }
.file-info span{ margin: 3px 2px; font-size: 12px; float:left; display: block; min-width: 100px; overflow: auto; border: 1px solid red; overflow: none; }
.upload-progress{ display: none; }</style>

<div id="dropbox">[file* fileElem id:fileElem limit:5000000]</div><div class="upload-progress"></div>

它对我有用，但我有5个文件的联系表格上传，当我上传一个进度条和缩略图时，所有这些都显示。见screnshot HERE。

我不是真正的程序员，也不是开发者，所以我没有足够的知识自己“修理”。我试图为CF7表格中的每个文件提供uniqe ID，但没有运气。

原始主题已关闭，因此我无法与我的问题联系开发人员。任何人都可以查看代码并提供一些线索吗？

提前谢谢