IT俱乐部 HTML5 HTML5拖拽文件上传的示例代码

HTML5拖拽文件上传的示例代码

上传文件

HTML5新增了文件API,提供客户端本地操作文件的可能.

我们可以通过file表单或拖放操作选择文件,还可以通过JavaScript读取文件的名称、大小、类型、和修改时间.

file类型的input表单新增了files属性,保存我们上传文件的信息,如果要实现多文件上传,可以设置input的multiple属性.

可以使用accept属性规定文件上传的MIME类型 例如’image/jpeg’



var btn = document.querySelector(‘#btn_1’);
var input = document.querySelector(‘#input_1’);
btn.addEventListener(‘click’, function() {
// 获取文件域中选择的文件
// var file = input.files[0];
var file = input.files.item(0);
if (file) {
result.innerHTML =
‘文件名:’ + file.name + ‘n文件最近修改时间:’ + file.lastModifiedDate+ ‘n文件类型:’ + file.type + ‘n文件大小:’ + file.size + ‘字节’
} else {
result.innerHTML = ‘没有选择任何文件’;
}
});

本文收集自网络,不代表IT俱乐部立场,转载请注明出处。https://www.2it.club/navsub/html5/13502.html
上一篇
下一篇
联系我们

联系我们

在线咨询: QQ交谈

邮箱: 1120393934@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部