本文目录一览：
- 1、js获取HTML5 多文件file选择的数量
- 2、input file 在js里获取文件内容
- 3、如何利用js在点击input type=file后选择好文件后，把选择的文件名直接复制到另外一个input里？
- 4、怎么用js来获取 file中的上传文件的文件名
- 5、js 怎么获取input type="file" 所选择的文件的绝对路径
- 6、原生js获取文件
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'/
input file 在js里获取文件内容
input file在选择完文件之后，他的值就是这个文件在你机器上的路径
js本身是不能去读取这个文件的内容的，比如获取图片大小，类型之类
你说的功能是属于ajax上传文件，服务器完成上传后返回文件的信息（或者内容），然后再在html上加载出来
这个功能一定要后台来完成
例
上传一个文本文件，input file获取本机路径，上传至服务器，服务器读取文本内容返回文本内容，在html上打印出来
如何利用js在点击input type=file后选择好文件后，把选择的文件名直接复制到另外一个input里？
具体的方法和详细的操作步骤如下：
1、首先，在打开的vs2015中选择“文件-新建-文件”，如下图所示。
2、其次，在打开的“新建文件”窗口中选择“HTML页”，如下图所示。
3、接着，在新的HTML页面中，我们创建一个要使用的file标签input type="file" /，如下图所示。
4、然后，修改input标签的样式。为了更好地进行说明，这里标签上直接写style，input type="file" style="background-image:url('z:\pic1.jpg');"/，如下图所示。
5、随后，在这里通过写一个a标签来更改 input='file'标签的背景图像，如下图所示。
6、最后，全部完成并预览效果，如下图所示。
怎么用js来获取 file中的上传文件的文件名
在firefox上，input（type=file）默认获取到的value值就是文件名。
在IE上，input（type=file）默认获取到的value值是路径。
因此用js来获取fileupload中的上传文件的文件名需要多方面考虑。
示例代码：
form action="" method="get" onSubmit="return false;"
input type="text" name="test" id="test"
input type="file" name="testFile" onChange="if(this.value)insertTitle(this.value);"
input type="submit" value="提交"
/form
script language="javascript"
function insertTitle(path){
var test1 = path.lastIndexOf("/"); //对路径进行截取
var test2 = path.lastIndexOf("\"); //对路径进行截取
var test= Math.max(test1, test2)
if(test0){
document.getElementById("test").value = path;
}else{
document.getElementById("test").value = path.substring(test + 1); //赋值文件名
}
}
/script
js 怎么获取input type="file" 所选择的文件的绝对路径
安全原因，浏览器不提供获取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);
})