上载文件jquery时出现未捕获的类型错误

Question

您好，我正在使用from来将歌曲上传到我的wordpress网站上。我使用一种表格，一个人可以将一个/多个歌曲文件上传到服务器。

我的表格是：

<form enctype="multipart/form-data" action="" method="post">
  <input type="file" name="songs[]" id="songs" multiple="multiple">
  <input type="submit" value="submit">
</form>

我想在使用表单选择文件后获得文件名（按提交之前）。

我使用以下代码：

var song_file = jQuery('#songs')[0].files[0]
  if(song_file){
  alert(song_file.name);
}

和

var filename = jQuery('#songs').prop("files")[0]['name'];
alert(filename);

但是存在控制台错误： Uncaught TypeError: Cannot read property 'name' of undefined

我该如何解决？

以及如何使用文件获取完整的URL？

例如：一个网址是： http://website.com/wp-content/uploads/2015/12/mpthreetest.mp3 : http://website.com/wp-content/uploads/2015/12/mpthreetest.mp3

另一个http://website.com/wp-content/uploads/2013/09/mpthreetest.mp3是： http://website.com/wp-content/uploads/2013/09/mpthreetest.mp3 ://website.com/wp-content/uploads/2013/09/mpthreetest.mp3

所以我只需要将日期固定在url上，我将从代码中获取文件名

Answer 1

未捕获的TypeError：无法读取未定义的属性“名称”

它可能是指jQuery('#songs').prop("files")[0]['name'] 。

以下是一个空的jQuery对象：

jQuery('#songs').prop("files")

要回答您的问题“我如何解决此问题” ，请首先查看为什么选择器jQuery('#songs').prop("files")不匹配任何内容。

编辑

检查带有ID songs的元素，可以看到files属性吗？ 是数组吗？ 是否包含任何内容？ 第一个元素是否包含name属性？

您的错误也可能来自alert行： alert(song_file.name);

只需检查控制台，它将指向您正确的行。

Answer 2

看起来您在页面加载中仍在空白时正在查看它。 您应该在输入字段的任何更改事件上查看文件，如下所示：

jQuery的

jQuery(document).ready(function() {
  jQuery("input:file").change(function(event) {
    var song_file = $('#songs')[0].files[0];
    if (song_file) {
      alert(song_file.name);
    }
  });
})

工作jsFiddle