获取文件名并将其放入值

Question

我在我的网站上上传重复文件时遇到问题，

但是，我想要的是，当我上传图片时，如果有重复的情况，文件名将是 image1.jpg，如果是更多 image2.jpg。我是在 PHP 上做的。但是我需要在上传后获取确切的文件，以便我可以正确地将 url 发送给客户端。

这里是javascript代码

var node = document.getElementById("option-122"),
    ele = document.createElement("form");


ele.className = "fileup"; 

ele.setAttribute("name", "fileToUpload");
ele.setAttribute("id", "fileupload");
ele.setAttribute("method", "post");
ele.setAttribute("target", "hidden-iframe");
ele.setAttribute("enctype", "multipart/form-data");
ele.setAttribute("action", "/wp-content/themes/dalia/upload.php");
node.parentNode.insertBefore(ele, node.nextSibling);

document.getElementById('fileupload').innerHTML = '<input type="file" id="inputfile" name="fileToUpload" accept="image/*" onchange="uploadFile()"><input type="submit" name="submit" id="form-submit" style="display: none !important;"><iframe name="hidden-iframe" style="display: none;"></iframe>';



document.getElementById('inputfile').onchange = uploadOnChange;

function uploadOnChange() {
  var filename = this.value;
  var lastIndex = filename.lastIndexOf("\\");
  if (lastIndex >= 0) {
    filename = filename.substring(lastIndex + 1);
  }
  document.getElementById('option-122').value = 'www.myurl.com/wp-content/themes/dalia/uploads/'+filename;
  document.getElementById("form-submit").click(); 
}
node.setAttribute("type","hidden");
document.getElementById("fileupload").style.width = '95%'; 

这是php的样子

<?php
  $uploads_dir = 'uploads/';

  $pname = $_FILES["fileToUpload"]["name"]; 
  $tname=$_FILES["fileToUpload"]["tmp_name"];

  $name = pathinfo($_FILES['fileToUpload']['name'], PATHINFO_FILENAME);
  $extension = pathinfo($_FILES['fileToUpload']['name'], PATHINFO_EXTENSION);

   $increment = 0; 
   $pname = $name . '.' . $extension;
   while(is_file($uploads_dir.'/'.$pname)) {
     $increment++;
     $pname = $name . $increment . '.' . $extension;
   }
   move_uploaded_file($tname, $uploads_dir.'/'.$pname);
   echo $pname;
?>

现在可以在 option-122 的值中写入文件名，但是当它是重复的情况时它不起作用。

Answer 1

以您提交表单的方式（在 iframe 中），您无法轻松获取新文件名。我认为你可以让你的生活更轻松，只需在上传时使用getTime()分配一个唯一的文件名：

所有这些都在您的表单中：

<input type='hidden' name='useFileName' value='' />

document.getElementById('fileupload').innerHTML = '<input type="file" id="inputfile" name="fileToUpload" accept="image/*" onchange="uploadFile()"><input type='hidden' name='useFileName' value='' /><input type="submit" name="submit" id="form-submit" style="display: none !important;"><iframe name="hidden-iframe" style="display: none;"></iframe>';

然后在这个函数中设置名称

function uploadOnChange() {
  var filename = this.value;
  var lastIndex = filename.lastIndexOf("\\");
  if (lastIndex >= 0) {
    filename = filename.substring(lastIndex + 1);
  }
// get extension
let ext = filename.split(".");
ext = ext[ext.length-1];
let newfile = 'upload-' + new Date().getTime() + "." + ext;
document.querySelector('input[name="useFileName"]').value=newfile;
  document.getElementById('option-122').value = 'www.myurl.com/wp-content/themes/dalia/uploads/'+newfile;
  document.getElementById("form-submit").click(); 
}

// 然后在php中，在上传时重命名文件

<?php
  $uploads_dir = 'uploads/';
  $tname=$_FILES["fileToUpload"]["tmp_name"];
  move_uploaded_file($tname, $uploads_dir.'/'.$_POST['useFileName']);
?>