使用javascript以字符串形式获取文件
get a file as a string using javascript
我有一个HTML表单来上传文件。
我的目标是提交表单,检查文件是否具有XML扩展名,并将文件作为字符串获取到JavaScript变量中。
然后,我想用这个字符串向服务器发送一个POST请求。
知道我该怎么做吗?
我的目标是提交表单,检查文件是否具有XML扩展名,并将文件作为字符串获取到JavaScript变量中。
我不认为你真的想在这个阶段提交表单(比如,把它发送给服务器)。
然后,我想用这个字符串向服务器发送一个POST请求。
你可以在支持File API的浏览器上这样做,这是最现代的浏览器,但不是IE8或IE9。在这个答案中有一个例子。
基本上,您从<input type="file">
元素的files
列表中获得File
实例,检查其名称,读取它,然后发布它:
完整的示例(源代码)(除了POST位,我假设您知道如何做):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
</head>
<body>
<input type="file">
<button>Go</button>
<script>
(function() {
"use strict";
// Get our input element and our button; in this example there's
// just one of each, you'd narrow down these selectors of course
var inputElement = document.querySelector("input[type=file]"),
button = document.querySelector("button");
if (typeof FileReader !== 'function') {
alert("The file API isn't supported on this browser.");
inputElement.style.display = button.style.display = "none";
return;
}
if (!inputElement.files) {
alert("Odd, this browser has FileReader but no `files` property on the input element.");
inputElement.style.display = button.style.display = "none";
return;
}
button.addEventListener("click", function() {
var file, filename, reader, filedata;
// Does it have any files?
if (inputElement.files.length === 0) {
alert("No file chosen");
return;
}
// Get its first file
file = inputElement.files[0];
// Get its name in lower case
filename = file.name.toLowerCase();
// XML extension?
if (filename.substr(-4) !== ".xml") {
alert("Please only choose .xml files");
}
else {
// Yes, read it
reader = new FileReader();
reader.onload = function() {
// Get the file data, note that this happens asynchronously
filedata = reader.result;
// Send your POST with the data; here, we'll just dump it out
// as text
displayXml(filedata);
};
reader.readAsText(file); // or you can use readAsBinaryString
}
}, false);
function displayXml(xmlText) {
var pre = document.createElement('pre');
pre.innerHTML = xmlText.replace(/&/g, "&").replace(/</g, "<");
document.body.appendChild(pre);
}
})();
</script>
</body>
</html>
相关文章:
- Fin上传器直接上传到Azure Blob存储-在Javascript中获取文件uri
- Node js:如何获取文件签名标头而不是 mime 类型
- 如何在没有JQuery的情况下在Javascript中获取文件的内容
- 获取文件并从rest api下载
- 使用javascript获取文件输入
- JS获取文件内容
- 如何在使用javascript上传文件时获取文件源路径
- javascript如何从服务器获取文件夹中文件的url
- 如何使用javascript获取文件夹中的图像列表
- 应用程序脚本-自动从谷歌驱动器删除超过3天的文件-获取文件列表
- 如何在javascript中从ondrop事件中获取文件URL
- 如何使用javascript获取文件夹中的文件列表
- Javascript获取文件内容循环
- 通过Crypto.js获取文件的md5sum
- Cordova应用程序:如何获取文件的实际路径
- 如何使用PHP从我自己的网站上的Google Drive获取文件和文件夹列表
- 如何在所有父节点上获取文件夹图标,在所有子节点上获取文件夹加图标(左侧的图标)
- 我想要获取文件输入并将其保存到本地路径的Javascript
- 从Google Drive获取文件并隐藏到Blob
- drupal7获取文件路径