无法获取input type="file"的值？

Question

我有一个 <input type="file" id="uploadPicture" value="123">。

当我使用 alert($("#uploadPicture").val()); 时，

它会弹出一个空对话框。

- Danpe

---

你什么时候调用那个警告？ - Thomas Shields

请查看以下链接：https://dev59.com/VW855IYBdhLWcg3wPBtx 和 http://jsfiddle.net/LvsYc/638/ 可能会对您有所帮助 :D - Jaider

Answer 1

@BozidarS: FileAPI现在得到了很好的支持，并提供了许多有用的选项。

var file = document.forms['formName']['inputName'].files[0];
//file.name == "photo.png"
//file.type == "image/png"
//file.size == 300821

- Dmytro Vyprichenko

Answer 2

您可以读取，但无法设置。 value="123" 将被忽略，因此在单击并选择文件之前，它将没有值。

即使这样，该值也可能会被处理成类似于c:\fakepath\的东西，以保护用户文件系统的详细信息。

- Quentin

---

正确--浏览器也会以不同的方式处理此问题，例如Firefox只会在选择文件后显示文件名，而某些浏览器可能会显示完整路径。在客户端方面，你真的无法做什么... OP，你想要实现什么目标？ - Atticus

Answer 3

您可以使用document.getElementById()来获取它。

var fileVal=document.getElementById("some Id");
alert(fileVal.value);

这将提供文件的值，但它会带有假路径，如下所示

c:\fakepath\filename

- Naresh.P

Answer 4

$('input[type=file]').val()

这将获取您选择的文件。

然而，您无法自行设置值。

- Jack Marchetti

Answer 5

您不能像使用value="123"一样在标记中设置file输入的value。

以下示例说明它确实起作用： http://jsfiddle.net/marcosfromero/7bUba/

- marcosfromero

Answer 6

文件数组

let files = document.getElementById('your_input_id').files

第一个文件

let file = document.getElementById('your_input_id').files[0]

在加载时显示图像

const reader = new FileReader()

let files = document.getElementById('your_input_id').files
reader.onload = async (event) => {
    document.getElementById('preview').setAttribute('src', event.target.result)
}
reader.readAsDataURL(files[0])

- Samculo

Answer 7

这是一个老问题，但以防有人重新遇到这个帖子...

var input = document.getElementById("your_input");
var file = input.value.split("\\");
var fileName = file[file.length-1];

无需使用正则表达式、jQuery等技术...

- Bozidar Sikanjic

Answer 8

不要将这个值作为文件输入 value="123"。

  $(document).ready(function(){  

      var img = $('#uploadPicture').val();

  });

- Md Shahriar