获取文件的输入值使用javascript

Question

我有被提交表单后上传的图像使用简单httppost到S3的JavaScript函数来模拟形式后，表单工作正常提交，但我想用ajax我敢找不到文件输入，因为我正在使用值字段。我试图抓住它与文件[0]，但这是空的..

是否一个httppost提交整个文件，我需要阅读文件的内容或只需使用ajax发布url作为值的文件字段？！这似乎并没有工作。

我宁愿阿贾克斯，因为当我使用正常提交刷新整个页面，并将用户重定向。我想将文件发送到S3和拦截来自S3使用AJAX无刷新浏览器的XML响应。

看来该文件的内容不会被加载到执行提交操作，因此文件的内容不可用，直到提交表单，如何从JavaScript触发此？我不使用jQuery所以我盘算如何让文件内容后变量从JavaScript发布。

Answer 1

您可以POSTFile或直接Blob对象通过fetch()呼叫设置在body任何一种情况下，或File对象追加到FormData对象和POSTmultipart/form-data到服务器。

document.querySelector("input[type=file]") 
.onchange = e => { 
    if (e.target.files.length) 
    fetch("/path/to/server", { 
     method:"POST", 
     body:e.target.files[0] 
    }) 
    .then(response => console.log(response.ok)) 
    .catch(err => console.error(err)) 
    } 
}