js获取HTML5 多文件file选择的数量

JavaScript022

js获取HTML5 多文件file选择的数量,第1张

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'/>

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)

})