HTML5 文件上传-学习笔记
2018-07-18 11:25
204 查看
HTML:
[code]<form method="post" action="http://localhost/test" enctype="multipart/form-data"> <p>图片预览:</p> <p></p><div id="test-image-preview" style="border: 1px solid #ccc; width: 100%; height: 200px; background-size: contain; background-repeat: no-repeat; background-position: center center;"></div><p></p> <p> <input type="file" id="test-image-file" name="test"> </p> <p id="test-file-info"></p> </form>
JAVASCRIPT:
[code]var fileInput = document.getElementById('test-image-file'), info = document.getElementById('test-file-info'), preview = document.getElementById('test-image-preview'); // 监听change事件: fileInput.addEventListener('change', function () { // 清除背景图片: preview.style.backgroundImage = ''; // 检查文件是否选择: if (!fileInput.value) { info.innerHTML = '没有选择文件'; return; } // 获取File引用: var file = fileInput.files[0]; // 获取File信息: 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; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...' preview.style.backgroundImage = 'url(' + data + ')'; }; // 以DataURL的形式读取文件: reader.readAsDataURL(file); });
执行结果:
上面的代码演示了如何通过HTML5的File API读取文件内容。以DataURL的形式读取到的文件是一个字符串,类似于
data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...,常用于设置图像。如果需要服务器端处理,把字符串
base64,后面的字符发送给服务器并用Base64解码就可以得到原始文件的二进制内容。
学习地址:操作文件 - 廖雪峰的官方网站
阅读更多相关文章推荐
- Struts2学习笔记之文件的上传与下载
- JSP Servlet学习笔记——使用fileupload上传文件
- 文件的上传下载---struts2学习笔记
- php学习笔记(十一)文件上传类的编写
- [Struts2]struts2 实现文件上传【学习笔记】
- android 入门学习笔记 上传大文件
- PHP学习笔记--文件目录操作(文件上传实例)
- JSP学习笔记:通过UUID为解决中文文件上传后的命名问题
- PHP学习笔记:文件上传
- 【小白笔记】PHP学习之路 (26) --文件上传与下载、配置
- iOS学习笔记 1 —— UIWebView加载本地HTML5文件
- Struts 1 学习笔记-4-1(Struts动态表单的测试以及上传文件的应用)
- php 学习记录 formdata 文件上传 ajax html5
- JSP Servlet学习笔记——使用fileupload上传文件
- Struts2学习笔记15:Struts2的文件上传和下载【续】二
- html5文件学习笔记1
- grails学习笔记-文件上传
- Struts2学习笔记之文件的上传与下载
- 云计算学习笔记004---hadoop的简介,以及安装,用命令实现对hdfs系统进行文件的上传下载
- struts2 学习笔记(三)——文件的上传和下载