如何检查我的输入文件上传的重复？答案

【问题标题】：How to check duplicate of my input file upload?如何检查我的输入文件上传的重复？
【发布时间】：2016-06-19 03:33:56
【问题描述】：

我有这个表格，它有一个文件上传按钮。当您选择一个文件时，它会显示在 upload_prev div 中。我的问题是，当我尝试选择同一个文件时，什么也没有发生。我想要运行验证或非重复功能。我这样做了。我尝试了很多事情和方法，比如使用子节点并查看内部文本是否相同。我尝试使用 jquery 每个循环并获取值，但它们都失败了。当我再次选择它时，我想显示一条消息，该文件已经在 upload_prev 的框中。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.js"></script>

      <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">

      <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">

  <style type="text/css">
    .fileUpload {
  position: relative;
  overflow: hidden;
  margin: 10px;
}

.fileUpload input.upload {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  background-color: #fff;
  filter: alpha(opacity=0);
}

.buttonwrap {
  text-align: center;
  padding-top: 20px;
  float: left;
  display: block;
}

.buttonsend:hover {
  background-color: rgba(255, 255, 255, 0.2);
  color: #225C51;
}

.buttonsend {
  text-decoration: none;
  color: #fff;
  font-size: 18px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: rgba(72, 133, 130, .5);
}

span {
  float: left;
  display: flex;
  width: 100%;
}

p.closed {
  margin: 0 0 0 7px;
  cursor: pointer;
}

  </style>

  <title></title>

<script type='text/javascript'>//<![CDATA[

$(window).load(function(){  
//  TO CLOSE THE SLECTED FILE
$(document).on('click', '.close', function() {
  $(this).parents('span').remove();
})

//JUST TO PUT A VALUE IN THE BOX WHICH HAS 
document.getElementById("uploadBtn").onchange = function() {
  document.getElementById("uploadFile").value = this.value;
};

document.getElementById('uploadBtn').onchange = uploadOnChange;
//document.getElementById('uploadBtn').onchange = myFunction;


function uploadOnChange() {

  var filename = this.value;
  var lastIndex = filename.lastIndexOf("\\");
  if (lastIndex >= 0) {
    filename = filename.substring(lastIndex + 1);
  }


//  alert (filename);

  var files = $('#uploadBtn')[0].files;

  for (var i = 0; i < files.length; i++) {
    $("#upload_prev").append('<span>' + '<div class="hesh">' + files[i].name +'</div>' + '<p class="close">X</p></span>');
  }
  document.getElementById('filename').value = filename;

        document.getElementById("demo").innerHTML = files.length;

}


});//]]> 

</script>


</head>

<body>
  <FORM METHOD="post" ACTION="" ENCTYPE="multipart/form-data">
<!--  <input id="uploadFile" placeholder="Add files from My Computer" class="steptextboxq3" />-->
  <div class="fileUpload btn btn-primary">
    <span>Browse</span>
    <input id="uploadBtn" type="file" class="upload" multiple="multiple" name="browsefile" />
  </div>
  <input id="filename" type="text" />

  <div id="upload_prev"></div>


  <div style="clear:both;"></div>
  <div class="buttonwrap">
    <a href="contactus.html" class="buttonsend" style="float:right;">Send </a> </div>
</FORM>

    <p id="demo"></p>

</body>

</html>

这是我的小提琴。我怎样才能找到一种方法来做到这一点。

https://jsfiddle.net/Lc5gb7c9/

【问题讨论】：

是否要求防止同一个文件被多次上传？
是的，我想在我的视图中检查这个文件名是否可用。如果可用，则会出现警报，如果文件没有添加到视图中，则文件已经在列表中。
是否需要同时上传选定的文件？

标签： javascript jquery duplicates multiple-file-upload

【解决方案1】：

您可以创建一个数组来存储files[i].name，使用Array.prototype.indexOf()检查文件名是否已添加到数组中，如果true调用alert()，否则将文件名添加到数组中。您可以在过程中的任何时候将数组重置为[]。

注意，<div> 和 <p> 元素不是 <span> 元素的有效内容

// outside of `onchange`
var arr = [];

for (var i = 0; i < files.length; i++) {
  if (arr.indexOf(files[i].name) === -1) { 
  arr.push(files[i].name)
    $("#upload_prev").append('<div>' 
     + '<div class="hesh">' 
     + files[i].name + '</div>' 
     + '<p class="close">X</p></div>');
  } else {
    alert(files[i].name + " already selected")
  }
}

jsfiddle https://jsfiddle.net/Lc5gb7c9/2/

【讨论】：

非常感谢它真的有效，我不敢相信，再次感谢你我有一个小问题，你为什么这样做？ indexOf(files[i].name) === -1 如果我理解的话，您能否确认一下，您这样做了，所以我们确保它不在我们的数组中，对吗？
@hesh 是的，如果files[i].name 不在arr 数组中，则将文件名推送到数组
我也有类似的问题。不同之处在于我允许用户多次选择图像，并且每次找到一组新文件时，我都想将它们附加到列表中并以相同的方式显示它们。在这种情况下会使用name 工作吗？相同的文件名可以存在于不同的文件夹中，同名的文件实际上可以在不同的文件夹中不同？是否可以检查这些情况？

【解决方案2】：

具有相同名称、大小、类型、修改时间的文件重复并具有不同内容的可能性很小

const existingFiles = []

function findFile(file) {
  return existingFiles.find(function(existingFile) {
    return (
      existingFile.name         === file.name &&
      existingFile.lastModified === file.lastModified &&
      existingFile.size         === file.size &&
      existingFile.type         === file.type
    )
  })
}

const input = document.querySelector('input')

input.addEventListener('change', function(e) {
  const files = e.target.files
  Array.from(files).forEach(function(file) {
    const existingFile = findFile(file)
    
    if (existingFile) {
      console.error('Existing file: ', existingFile)
      return
    }
    
    existingFiles.push(file)
    console.warn('Added file: ', file)
  })
})

&lt;input type="file" /&gt;

【讨论】：

【解决方案3】：

我认为您在如何将文件分配给 dom 时遇到了问题。请记住 FileList 是只读的，这意味着您不能选择多个文件然后继续并将它们附加到现有元素。

但您可以将它们附加到 JavaScript 数组中：

files=[]; files.push(fileList);

所以，我编辑了您的 JSFiddle 以包含此功能，以及您要求的检查：

https://jsfiddle.net/Lc5gb7c9/3/

我建议你看看： http://blog.teamtreehouse.com/uploading-files-ajax 用于通过 Ajax 上传的方式，因为您需要创建 formData 对象，然后遍历您的 Uploaded_files 数组并将它们附加到正确的 formData 键。他们正在从 html 元素中获取文件，但是您已经在 upload_files 数组中有文件，所以您可以这样做：

 for (var i = 0; i < uploaded_files.length; i++) {
       formData.append('files[]', uploaded_files[i], uploaded_files[i].name);
 }

完成后，您就可以进行 ajax 调用了。

【讨论】：

非常感谢它和我一起工作，是的，我会看看博客，现在我真的明白了，谢谢