如何更改已上载文件的列表

我正在尝试使用XMLHttpRequest将文件上传到服务器。以下是我希望代码执行的步骤：

1. 在文件列表ul中列出文件
2. 在显示进度条的同时上载文件
3. 文件完全上载后，将该文件的列表项更改为不带进度条的链接。这就是我的问题所在

这是我正在使用的HTML代码：

<h1>Upload Files</h1>
<input type='file' name='doc_upload_field[][]' multiple='multiple' id='doc_upload_field' /> 
<ul id='filelist'></ul>

以下是我正在使用的javascript代码：

function transferFailed(evt) {
    alert("An error occurred while transferring the file.");
}                       
function transferCanceled(evt) {
    alert("The transfer has been canceled by the user.");
}
var filelist = $('#filelist');//define where the list of files will go
var url = "/";
function handleFileSelect_inputfield(evt) {
  var files = evt.target.files; // FileList object

  // run through each file individually.
  for (var i = 0, f; f = files[i]; i++) {    
  var li = $("<li><strong>" + f.name + "</strong> (" + f.type  +") - " + f.size + " bytes <div class='progress_bar'><div class='percent'>&nbsp;</div></div></li>");
  filelist.append(li);//put the file in the filelist
  var formData = new FormData(); 
  formData.append(f.name, f);
  //upload through xmlhttprequest
  var xhr = new XMLHttpRequest();           
  xhr.upload.li = li;
  xhr.upload.addEventListener("progress", function(e) {
    if (e.lengthComputable) {
      var percentLoaded = Math.round((e.loaded / e.total) * 100);                     
      // Increase the progress bar length.
      if (percentLoaded < 100) {
        this.li.find(".progress_bar").addClass('loading');
        this.li.find(".percent").width(percentLoaded + '%');
      } 
    }               
  }, false);
  xhr.upload.addEventListener("load", function(e) {
    //uploading is complete                 
  }, false);        
  xhr.upload.addEventListener("error", transferFailed, false);
  xhr.upload.addEventListener("abort", transferCanceled, false);
  xhr.open('POST', url, true);
  xhr.responseType = 'text';
  xhr.onload = function(e) {                
    if (this.readyState==4){  
      if (this.status == 200) { 
          //console.log(this.response);
          console.log("finished=" + li);//returns as an object
          //console.log("filename=" + f.name);//error: cannot read property 'name' of undefined              
          //change the list item. Not working...
          this.li.find("li").html("<a href='#'>" + f.name + "</a>");                      
      }
    }
  };                                    
  xhr.send(formData);  // multipart/form-data                     
  }     
}
document.getElementById('doc_upload_field').addEventListener('change', handleFileSelect_inputfield, false);

一切似乎都在工作，但当我想更改列表项时，李，它无法识别它。我可以通过调用来更改进度条长度

this.li.find(".progress_bar").addClass('loading');
this.li.find(".percent").width(percentLoaded + '%');

但当我想更改列表项时：

this.li.find("li").html("<a href='#'>" + f.name + "</a>");

它不起作用。

有人知道为什么它在更改进度条时会找到它，但在上传后却找不到它吗？