Question

我需要你的帮助。这项工作到目前为止，当我添加文件字段并向其添加文件时，我将收到警报。但是当我想要更改前一个字段时，它将显示最后一个字段。我尝试过使用不同的id：s但是我被卡住了。

此外如何仅在showSrc（）中显示文件名？

upload.html

<form id="uploadForm" action="{% url fileman.views.upload %}" method="post"  enctype="multipart/form-data">{% csrf_token %}
<p><input type="file" name="ufile1" id="myfile1" onChange="javascript:showSrc();" size="20"><a href="#" id="myframe1"></a></p>
<p id="addFileFild"><a href="#" id="myframe" onclick="return addFileFild();"><img src="{{ fileman_media_url }}/plus_icon.png"WIDTH=25 HEIGHT=25></a></p>

的script.js

function addFileFild(){
  ufile = ufile+1;
  myfile = myfile+1;
  myframe = myframe+1;
  $("#addFileFild").before('<p><input type="file" name="ufile'+ufile+'" id="myfile' +myfile+'" onChange="javascript:showSrc();" size="20"><a href="#" id="myframe' +myframe+'"></a></p>');
return 0;
}


function showSrc() {
  document.getElementById("myframe"+myframe).href = document.getElementById("myfile" +myfile).value;
  var theexa=document.getElementById("myframe"+myframe).href.replace("file:///","");
  alert(document.getElementById("myframe"+myframe).href.replace("file:///",""));
  }

这是我每次都必须得到正确的字段值的地方：

document.getElementById("myfile" +myfile).value;

这是Dr.Molle的解决方案，为chrome和IE8 +添加了C：/ fakepath删除。

function showSrc(obj) {
  //obj.nextSibling.href = obj.value;
  // this is for Chrome and IE8+ excluding C:/fakepath/...
  var filename = obj.value.replace(/^.*\\/, '')
  //Write filename to page.
  obj.parentNode.replaceChild(document.createElement('span'),obj.parentNode.lastChild);
  obj.parentNode.lastChild.appendChild(document.createTextNode(filename));

}

Answer 1

将输入作为showSrc（）

的参数提供

onChange="showSrc(this)"

在showSrc里面访问这个参数：

function showSrc(obj) {
  obj.nextSibling.href = obj.value;
  //output the src inside the link
  obj.nextSibling.innerHTML = '';
  obj.nextSibling.appendChild(document.createTextNode(obj.value));
  //......
  }

有关评论的编辑功能：

function showSrc(obj) {
  obj.parentNode.replaceChild(document.createElement('span'),obj.parentNode.lastChild);
  obj.parentNode.lastChild.appendChild(document.createTextNode(obj.value));
}

使用javascript从上传文件字段显示文件名

1 个答案: