Question

我有一个包含文件输入，上传按钮和取消按钮的表单：

更新：

    <form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='stopImageUpload(this);' class='imageuploadform' >
    <p class='imagef1_upload_form' align='center'><label>Image File: <input name='fileImage' type='file' class='fileImage' /></label>
    <input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload' /></label>
    </p>
    <p class='imagef1_cancel' align='center'>
    <label><input type='button' name='imageCancel' class='imageCancel' value='Cancel' /></label>
    </p> 
<p><span class='list></span></p>
    <iframe class='upload_target' name='upload_target' src='#' style='width:0;height:0;border:0px;solid;#fff;'></iframe>
    </form>

现在我想要的是，如果图片已经完成上传，则在此表单的底部我想要已经上传的文件的名称。这可能吗？例如，我上传Images / file1.png，上传后名称file1.png存储在底部，我上传user / file2.jpg名称file2.jpg存储在file1.png等下面的底部。

我上传的文件全部用php和javascript整理出来。以下是上传完成后的javascript代码：

       $(document).ready(function(){
    $('.fileImage').bind('change', handleFileSelect, false);
});

function handleFileSelect(evt) {
    var files = evt.target.files;
    localStorage["fname"] = files[0].name; //save the name for future use
}
function stopImageUpload(success){
      var result = '';
      if (success == 1){
  result = '<span class="msg">The file ('+localStorage["fname"]+') was uploaded successfully!</span><br/><br/>';
    localStorage["fname"] = undefined; //remove the temporary variable

      }
      else {
         result = '<span class="emsg">There was an error during file upload!</span><br/><br/>';
      }

      return true;   
}

Answer 1

JavaScript Way

如果您的目标是现代浏览器（不再是IE6789），那么File API是您获取文件名的正确选择！它易于使用，并且代码中没有任何混乱。

查看我制作的演示：http://jsfiddle.net/xUzcS
这是你想要的吗？

但是如果你想支持那个旧的IE6，那么抱歉，你必须采用AJAX方式，或者使用VBscript。（不推荐）

ADDED

function handleFileSelect(evt) {
    var files = evt.target.files;
    localStorage["fname"] = files[0].name; //save the name for future use
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);

然后：

if (success == 1){
    result = '<span class="msg">The file ('+localStorage["fname"]+') was uploaded successfully!</span><br/><br/>';
    localStorage["fname"] = undefined; //remove the temporary variable
}

这可能适合你，因为我不知道整个HTML。

如何在上传文件后显示文件名

1 个答案:

JavaScript Way

ADDED