如何获取输入文件的文件名并在单击按钮时再次显示它而不上传它？

Question

我很难思考我需要做什么才能实现我的目标。

目标：
1. 复制我要上传的文件的文件名，并在单击按钮但不上传时显示它。
2. 单击“提交”按钮后能够上传。

步骤：

第 1 步：我将选择要上传的文件。所以我将单击“选择文件”。

第2步：现在它应该显示我在第1步中选择的文件的名称。然后，我将单击“下一步”。

第3步：点击“下一步”只会显示第2步中的内容，但它是灰色的，并且没有“下一步”按钮，而是“提交”按钮。这就像确认我是否确定上传文件。当我单击“提交”时，这是文件唯一上传的时间。

所以我需要能够完成第三步。但我不知道如何做。 :'( 。
我正在使用 PHP 和 JS。

我不确定我的问题是否正确。也欢迎大家指正。

任何帮助将非常非常感激。非常感谢！！！

Answer 1

这里有一个快速片段，希望可以帮助您继续前进：

<body>

    <input type="file" name="upload" id="upload">
    <div id="filename"></div>    

<script type="text/javascript">

    $('#upload').on('change',function(){
       // output raw value of file input
       $('#filename').html($(this).val()); 

        // or, manipulate it further with regex etc.
        var filename = $(this).val();
        // .. do your magic

        $('#filename').html(filename);
    });

    </script>
 </body>

这将输出类似：Opera 中的

C:\fakepath\Screenshot_2015-56-03_12-56.JPG

，IE 11 中文件的绝对路径，如

C:\users\foo\Desktop\file.jpg

您可以进一步操作文件输入字段的值，以仅使用正则表达式等来隔离文件名。

Answer 2

HTML代码：

  <form>
      <input type="file" id="file-upload" multiple required />
      <label for="file-upload">Upload file</label>
      <div id="file-upload-filename"></div>
   </form>

Javascript：

var input = document.getElementById( 'file-upload' );
var infoArea = document.getElementById( 'file-upload-filename' );

input.addEventListener( 'change', showFileName );

function showFileName( event ) {
  
  // the change event gives us the input it occurred in 
  var input = event.srcElement;
  
  // the input has an array of files in the `files` property, each one has a name that you can use. We're just using the name here.
  var fileName = input.files[0].name;
  
  // use fileName however fits your app best, i.e. add it into a div
  infoArea.textContent = 'File name: ' + fileName;
}

如何获取输入文件的文件名并在单击按钮时再次显示它而不上传它？

问题描述投票：0回答：2

2个回答

最新问题

如何获取输入文件的文件名并在单击按钮时再次显示它而不上传它？

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2