Question

我有一个表单使用Jquery Form将ajax请求上传文件发送到服务器。这一切都很好，我已经做了一个功能，在用户点击“上传”按钮之前，他们可以查看表格中输入类型=“文件”中的所有文件，每行都有一个删除按钮，如果你不删除这一行我想在这一行上传文件。

但我不知道如何在javascript this.files数组中真正删除该文件？我知道这是安全错误，然后Javascript无法更改输入文件的值。

那么，我如何模拟用户选择并删除的文件数组以向服务器发送请求？

请帮助我！

注意：我自己解决了这个问题，我希望与想要从输入倍数中删除文件的人分享。请参阅此链接

AJAX/PHP based upload with progress bar for large files

在这里，您必须使用xmlHTTPRequest从您要服务的列表中发布文件。因此，如果用户在行中删除了某个文件名，您的文件数组也将更新。毕竟，您将数组更新为服务器，每个元素，每个xhr请求。

感谢任何人。

  xhr.setRequestHeader("Cache-Control", "no-cache");
        xhr.setRequestHeader("Content-Type", "multipart/form-data");
        xhr.setRequestHeader("X-File-Name", fileToUpload.name);
        xhr.setRequestHeader("X-File-Size", fileToUpload.size);
        xhr.setRequestHeader("X-File-Type", fileToUpload.type);
        //xhr.setRequestHeader("Content-Type", "application/octet-stream");

这是我的HTML

<form action="processupload.php" method="post" enctype="multipart/form-data" id="MyUploadForm">

<!-- file input not disable it, just hide by position !-->
<input name="FileInput[]" id="FileInput" type="file" multiple style="position: absolute;left: -9999px;"/>

<a href="#" id="addFiles" style="display:inline;">Add Files</a>

<input type="submit"  id="submit-btn" value="Upload" style="display:inline;"/>
<img src="images/ajax-loader.gif" id="loading-img" style="display:none;" alt="Please Wait"/>
</form>

这是我的Javascript

// when change fileinput then get it files name and put to array to check new file or not
$('#FileInput').change(function(e){
  if(arrayFiles.length == 0)
  {
      for (var i = 0; i < this.files.length; i++)
{
    // alert(this.files[i].name);
    fileNameNew = this.files[i].name;

            // Check file is valid
    if(checkFileValid(this.files[i]))
    {
    arrayFiles.push(fileNameNew);
            }
}
  }
  // check if new file is in arrayFiles or not
  else
  {
// check if file name is same in arrayFiles
for(var i = 0; i < this.files.length; i++)
       {
  fileNameNew = this.files[i].name;
  flag = true;
          for(var j=0; j < arrayFiles.length; j++)
          {
     fileNameOld = arrayFiles[j];      
     if(fileNameOld == fileNameNew)
     {
flag = false;
break; // same file name then not need to push to arrayFiles
     }
  }

  // file is new in arrayFiles
  if(flag == true)
  {
// fileNameNew is not in arrayFiles so push it to arrayFiles
if(checkFileValid(this.files[i])) // check file name is .hdf
       {
  arrayFiles.push(fileNameNew);
               }
  }
       }
  } // end else check upload new files name
//   alert(arrayFiles.length);  

  // rerender the tbody of table id = "files"
  /*
  $('#files').find('tbody').append("<tr id='row1'><td>1</td><td>ABC123</td><td><a href='#' name='deleteRow' id='delRow_1'>Delete</a></td></tr><tr id='row2'><td>2</td><td>ABCE1234</td><td><a href='#' name='deleteRow' id='delRow_2'>Delete</a></td></tr><tr id='row3'><td>3</td><td>3242efsdfEWRweR3</td><td><a href='#' name='deleteRow' id='delRow_3'>Delete</a></td></tr>");
  */
 tableFilesRender(arrayFiles);

 alert($("#FileInput").val(''));

});

// render tbody of table id = "files"
function tableFilesRender(arrayFiles)
{

 // clear the table files tbody first
 $("#files > tbody").html("");

 // iterrate the arrayFiles and write the array row
 content = "";

 // Row like this: <tr id='row1'><td>1</td><td>ABC123</td><td><a href='#' name='deleteRow' id='delRow_1'>Delete</a></td></tr>
 for(var i = 0; i < arrayFiles.length; i++)
 {
    trStart = "<tr id='row" + i + "'>";
    td1 = "<td>" + (i + 1) + "</td>";
    td2 = "<td>" + arrayFiles[i] + "</td>";
    td3 = "<td><a href='#' name ='deleteRow' id = 'delRow_" + i + "'>Delete</a></td>";
    trEnd = "</tr>";

    content += trStart + td1 + td2 + td3 + trEnd;
 }

 // append content to table #files
  $('#files').find('tbody').append(content);
}

// Check file is valid type
function checkFileValid(file)
{
 fileExtension = file.name.split('.').pop();
 if(fileExtension == "hdf")
 {
    return true;
 }
 alert(file.name + " không hợp lệ, phải là dạng file HDF .hdf!");
 return false;
}

// handle event delete row (created dynamicall), need to get the closet father is #files table and the selector [name='deleteRow']
$("#files").on("click", "[name='deleteRow']", function(event){
 deleteID = $(this).attr("id");
 temp = deleteID.split("_");
 rowID = "row" + temp[1];

 // remove the arrayFiles at rowID
 arrayFiles.splice(temp[1], 1);

 //alert(rowID);
 $("#files #" + rowID).remove(); // remove rowID on files table only
//alert(temp[1] + "Link is clicked!");

 // delete success then rerender the tables files
 tableFilesRender(arrayFiles);
});

Javascript - 如何在文件输入多个文件中删除文件？

0 个答案: