Javascript 如何获取使用“浏览”按钮选择的文件的内容?
您可以创建一个浏览按钮,让用户在目录中导航,直到他选择了一个文件。整个路径和文件名显示在浏览按钮复合体的文本元素中。那么,我如何打开该文件来提取数据并对其采取行动呢 以下是我在这方面取得的进展:Javascript 如何获取使用“浏览”按钮选择的文件的内容?,javascript,jquery,python,html,dom,Javascript,Jquery,Python,Html,Dom,您可以创建一个浏览按钮,让用户在目录中导航,直到他选择了一个文件。整个路径和文件名显示在浏览按钮复合体的文本元素中。那么,我如何打开该文件来提取数据并对其采取行动呢 以下是我在这方面取得的进展: <div id="browseFile" style="z-index: 1; left:-1040px; width:400px"> <input id="browse4File" name="/static/Import/Example Portfolio
<div id="browseFile" style="z-index: 1; left:-1040px; width:400px">
<input id="browse4File" name="/static/Import/Example Portfolio 1.csv" type="file" accept="text/plain" maxlength="200" style="left:20px; width: 200px;" /><br/>
<span style="position:relative;top:72px; left:320px; top:73px;">
<!--<button type="button" onclick="javascript:importFile()" style="font-size:16px;">Save</button>-->
<button type="button" onclick="javascript:u=document.getElementById('browse4File').value ;alert(u);" style="font-size:16px;">Save</button>
</span>
</div>
拯救
Alert()会显示文件名,但不会显示路径。安全问题。。。没问题!但是我怎样才能打开这个文件呢?我要把它发送到后端吗?我在服务器上与cherrypy一起使用Python
或者JavaScript可以提取文件的内容吗
请帮忙
短暂性脑缺血发作
DKean使用HTML4是不可能的,使用HTML5可以使用。签出浏览器 例:
功能手柄文件选择(evt){
var files=evt.target.files;//文件列表对象
//循环浏览文件列表并将图像文件渲染为缩略图。
for(var i=0,f;f=files[i];i++){
//仅处理图像文件。
如果(!f.type.match('image.*')){
继续;
}
var reader=new FileReader();
//闭包以捕获文件信息。
reader.onload=(函数(文件){
返回函数(e){
//渲染缩略图。
var span=document.createElement('span');
span.innerHTML=['').join('');
document.getElementById('list').insertBefore(span,null);
};
})(f) );
//作为数据URL读入图像文件。
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change',handleFileSelect,false);
演示:可能重复,看到这个答案了吗?我没有看到比我所做的更多的东西。您的代码对我来说很有意义,但在小提琴中它不会输出文件的任何内容!哦,我明白了,你接线只是为了图像!知道了。现在,我只能为文本连接它!我看到您从@DKean获得了该代码。请查看中的示例,了解如何读取文本文件。我这样做了,但在FireFox中失败了。这是非常无用的,因为我的用户大部分时间都在使用FF。
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb" src="', e.target.result,
'" title="', escape(theFile.name), '"/>'].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);