Question

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

在文件列表ul
在显示进度条的同时上传文件
文件完全上传后，将该文件的列表项更改为不带进度条的链接。这就是我遇到问题的地方。

以下是我正在使用的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);

一切似乎都在起作用，但是当我想要更改列表项时，li，它不会识别它。我可以通过调用：

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

但是当我想更改列表项时：

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

它不起作用。

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

Answer 1

表达式

this.li.find("li")

在另一个<li>元素中查找<{1}}元素元素。没有一个，所以没有任何反应。

我认为只是

<li>

应该是你想要的。 ~~或者你可以这样做：~~

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

编辑 oops no不会起作用，因为你已经把它卡在了DOM中。但第一个应该有用。

编辑 - 您还遇到了与闭包相关的问题（或与范围相关的问题）。你可以做的就是你已经为“li”值所做的事情。将另一个属性添加到“xhr.upload”：

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

在你设置“xhr.updated.li”的地方这样做。然后，在事件处理程序中，您可以执行以下操作：

xhr.upload.updated_li = "<a href='#'>" + f.name + "</a>";

如何更改上传文件列表？

1 个答案: