本文目录一览:
- 1、input file 在js里获取文件内容
- 2、js选取文件并显示文件
- 3、js实现选择文件夹路径
- 4、js获取HTML5 多文件file选择的数量
- 5、原生js获取文件
- 6、js点击选择文件目录的功能
input file 在js里获取文件内容
input file在选择完文件之后,他的值就是这个文件在你机器上的路径
js本身是不能去读取这个文件的内容的,比如获取图片大小,类型之类
你说的功能是属于ajax上传文件,服务器完成上传后返回文件的信息(或者内容),然后再在html上加载出来
这个功能一定要后台来完成
例
上传一个文本文件,input file获取本机路径,上传至服务器,服务器读取文本内容返回文本内容,在html上打印出来
js选取文件并显示文件
你用input就能获取到文件路径吧, 你在input下面加个img,通过js把input的文件路径写在img src属性上就好了,没有点击上传的时候。如果你想文件都上传到服务器上后,只能写相对路径了
js实现选择文件夹路径
input type="button" value="choose folder" name="" onclick="BrowseFolder()"
function BrowseFolder(){
try{
var Message = "please choose folder"; //选择框提示信息
var Shell = new ActiveXObject( "Shell.Application" );
var Folder = Shell.BrowseForFolder(0,Message,0x0040,0x11);//起始目录为:我的电脑
//var Folder = Shell.BrowseForFolder(0,Message,0); //起始目录为:桌面
if(Folder != null){
Folder = Folder.items(); // 返回 FolderItems 对象
Folder = Folder.item(); // 返回 Folderitem 对象
Folder = Folder.Path; // 返回路径
alert(Folder);
}
}catch(e){
alert("exception");
}
}
js获取HTML5 多文件file选择的数量
1、并没有原生的方法控制个数。
2、解决办法:等选择完了用js去计算有多少个,如果超出了就提示。思路如下:
1)你可以在选择完文件后,你的input的onchange事件中,判断event.target.files.length就可以知道你的文件多少了。
2)在onchange事件中使用
if (event.target.files.length 10) {
console.log("图片太多啦!超过十张啦!");
let files = event.target.files
files = Array.from(files).slice(0,10)
//此处写你的上传接口,参数就是files
console.log("只上传10张哦",files)
}
这个方法可以限制文件只需要上传选中的前10个。
扩展资料:
1、关于input标签上传文件,还有一个属性是accept。可以限制只能上传图片类型,这样可以避免用户上传很多非图片的文件,不好处理。使用方法:input id="File1" type="file" accept="image/*" /
2、调用接口上传文件的方法,可以使用FormData,FromData 是一次 http mulitpartfrom-data 的请求内容可以使用 append 方法向其添加名词对,然后使用 XMLHttpRequest 的 send() 方法发送.
eg:
var fileObj = new FromData();
fileObj.append('key',value); // value 可以是一个字符串 string 也可以是一个 blob (代表,file对象)
var xhr = new XMLHttpRequest();
xhr.open('POST','url',true);
xhr.send(fileObj);
参考资料:
MDN技术文档-input type='file'/
原生js获取文件
HTML5新增了关于文件的File,FileReader两个对象,用于获取文件信息和读取文件信息。
var
fileInput = document.getElementById('test-image-file'),
info = document.getElementById('test-file-info'),
preview = docement.getElementById('test-image-preview');
//监听change事件
fileInput.addEventListener('change', function() {
//清除背景图片
preview.style.backgroundImage = '';
//检查文件是否选择
if(!fileInput.value) {
info.innerHTML = '没有选择文件';
return;
}
//获取file文件引用:
var file = fileInput.files[0];
//获取文件信息
info.innerHTML = '文件:' + file.name + 'br' +
'大小:' + file.size + 'br' +
'修改:' + file.lastModifiedDate;
if(file.type !== 'image/jpeg' file.type !== 'image/png' file.type !== 'image/gif') {
alert('不是有效的图片文件');
return;
}
//读取文件
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result;
preview.style.backgroundImage = 'url('+ data + ')';
};
//以DataURL的形式读取文件:
reader.readerAsDataURL(file);
})
js点击选择文件目录的功能
最近做一个小项目,前端需要有一个功能是点击某按钮时,弹出文件选择的框,然后获取目录并写入对应的输入框里,以往是选择某个文件进行上传,功能看起来有些像,但这次不同的是只能选择某个目录而不是文件,因为它并不是上传,它只是为了选择后台生成的文件保存的路径。
于是网上查解决方案,查到两种,
一种是仅在谷歌浏览器上有效的方式,在input节点里加一个属性 webkitdirectory,就可以实现点击弹出选择目录的功能,然后就可以截取目录,此种方式对非空文件夹是可以的实现的,只需监听此input的change事件即可,但如果选择的是空文件夹,就不会触发事件,就无法获取路径,所以这方法不复合我的需求。
另一种是只适用于IE浏览器的方式,即调用IE的activeX控件,为点击按钮绑定事件,然后就可以获取目录,然后到目录调到想要的地方即可,具体实现方式是:
input id="show"
button onclick="clickBtn()"点击/button
function click() {
try {
var Message = "\u8bf7\u9009\u62e9\u6587\u4ef6\u5939"; //选择框提示 var Shell = new ActiveXObject("Shell.Application");
var Folder = Shell.BrowseForFolder(0, Message, 64, 17); //起始目录为:我的电脑 //var Folder = Shell.BrowseForFolder(0, Message, 0); //起始目录为:桌面 if (Folder != null) {
Folder = Folder.items(); // 返回 FolderItems 对象
Folder = Folder.item(); // 返回 Folderitem 对象
Folder = Folder.Path; // 返回路径
if (Folder.charAt(Folder.length - 1) != "\\") {
Folder = Folder + "\\";
}
document.getElementById('show').value = Folder;
return Folder;
}
} catch (e) { alert(e.message); }
}
但些方式也有一个问题是,此控件是默认关闭的,需要用户手动启用,并且要把本站点加入可信任站点才行,具体设置过程是:
1. 单击菜单工具-Internet选项-安全-受信任站点-站点-把此网站设为可信站点
2. 在自定义级别-对没有标记为安全的ActiveX控件进行初始化和脚本运行"----"启用"