input标签前台实现文件上传
值得注意的是:当一个表单里面包含这个上传元素的时候,表单的enctype必须指定为multipart/form-data,method必须指定为post,浏览器才会认识并正确执行。但是还有一点,浏览器只允许用户点击<input type="file">来选择本地文件,用JavaScript对<input type="file">的value赋值是没有任何效果的。当用户选择了上传某个文件后,JavaScript也无法获得该文件的真实路径:
但是有个方法可以,利用File和FileReader两个主要对象,可以获得文件信息并读取文件。
例子文件:file-upload-demo.html
HTML文件
<form method="post" enctype="multipart/form-data" id="file_upload">
<p>图片预览:</p>
<div id="test-image-preview"></div>
<p>
<input type="file" id="test-image-file" name="test" accept="image/gif, image/jpeg, image/png, image/jpg">
</p>
<p id="test-file-info"></p>
</form>
CSS
#test-image-preview {
border: 1px solid #ccc;
width: 100%;
height: 200px;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
JS
<script src="http://cdn.loveqiao.com/jquery.js"></script>
<script type="text/javascript">
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];
//判断文件大小
var size = file.size;
if(size >= 1*1024*1024){
alert('文件大于1兆不行!');
return false;
}
// 获取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;</span><span style="color: #008000">//</span><span style="color: #008000"> 读取文件:</span></br>
<span style="color: #0000ff">var</span> reader = <span style="color: #0000ff">new</span><span style="color: #000000"> FileReader();</br>
reader.onload </span>= <span style="color: #0000ff">function</span><span style="color: #000000">(e) {</br>
</span><span style="color: #0000ff">var</span><span style="color: #000000"></br>
data </span>= e.target.result; <span style="color: #008000">//</span><span style="color: #008000"> 'data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...}' </span></br>
preview.style.backgroundImage = 'url(' + data + ')'<span style="color: #000000">;</br>
};</br>
</span><span style="color: #008000">//</span><span style="color: #008000"> 以DataURL的形式读取文件:</span></br>
reader.readAsDataURL(file);
console.log(file);
});
</script>
input标签前台实现文件上传的更多相关文章
- input标签处理多文件上传
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...
- struts2 s:file标签使用及文件上传例子
<s:form action="uploadaction" method="post" enctype="multipart/form-da ...
- input file美化,文件上传
此文学习至:http://www.haorooms.com/post/input_file_leixing 然而只会用,不会做,UI泪茫茫 效果图: 原图: 美化后: 此主要用css美化表单,然后用J ...
- h5 input file ajax实现文件上传
<input type="file" accept="image/*" height="0" class="file_inp ...
- 【代码审计】CLTPHP_v5.5.3 前台任意文件上传漏洞分析
0x00 环境准备 CLTPHP官网:http://www.cltphp.com 网站源码版本:CLTPHP内容管理系统5.5.3版本 程序源码下载:https://gitee.com/chich ...
- 【代码审计】CLTPHP_v5.5.3 前台任意文件上传漏洞
0x00 环境准备 CLTPHP官网:http://www.cltphp.com 网站源码版本:CLTPHP内容管理系统5.5.3版本 程序源码下载:https://gitee.com/chichu/ ...
- jquery的input:type=file实现文件上传
<!DOCTYPE html> <html> <head> <title>html5_2.html</title> <style> ...
- 前端 HTML form表单标签 input标签 type属性 file 上传文件
加上上传文件功能 input type='file' - 依赖form表单里一个属性 enctype="multipart/form-data" 加上这个属性表示把你上次文件一点 ...
- input accept属性限制文件上传格式
上传文件的类型:具体做法如下所示: 注意:accept属性可以限制上传格式,其有兼容性如下 <1>上传.csv格式的 <input text="file" acc ...
随机推荐
- Linux ifconfig 查看网络接口状态
Linux ifconfig 如果不接任何参数,就会输出当前网络接口的情况: [root@localhost ~]# Linux ifconfig eth0 Link encap:Ether ...
- 洛谷P2327 [SCOI2005]扫雷 [2017年5月计划 清北学堂51精英班Day1]
P2327 [SCOI2005]扫雷 题目描述 输入输出格式 输入格式: 第一行为N,第二行有N个数,依次为第二列的格子中的数.(1<= N <= 10000) 输出格式: 一个数,即第一 ...
- 关闭防火墙,仍然无法访问80端口 centos
如果你用的是阿里云,那么需要添加80端口开放才行,在云服务器-安全组-添加安全组
- SaaS launch Kit成回收宝和友盟云合作纽带,帮助提升3倍上云效率
导语:叶飞表示,全球二手手机市场未来几年将发生巨大变革, 回收宝正进行积极布局.与阿里云开展紧密技术合作,回收宝期待成为这一变革的引领者. 7月26日,在阿里云上海峰会上,阿里云了发布SaaS生态战略 ...
- Linux ar命令介绍 和常用示例
制作静态库要用到ar命令,命令格式: ar [-]{dmpqrtx}[abcfilNoPsSuvV] [membername] [count] archive files... {dmpqrtx}中的 ...
- ubuntu上设置截图快捷键
ubuntu自带的截图工具感觉能够满足基本的截图功能,可以不必安装另外的截图软件. 一般用到的截图类型有三种:全屏.当前活动窗口.自定义区域,其中自定义区域截图是最灵活也是我们用的最多的方式.在ubu ...
- 阿里云 EMAS HTTPDNS 联合函数计算重磅推出 SDNS 服务,三大能力获得突破
1. 什么是 HTTPDNS ? 传统的 DNS(Domain Name System)使开发者常面临着域名劫持.调度不精准的问题. HTTPDNS 使用 HTTP 协议替换常用的 UDP 协议,完成 ...
- Python 中的 map, reduce, zip, filter, lambda基本使用方法
map(function, sequence[, sequence, ...] 该函数是对sequence中的每个成员调用一次function函数,如果参数有多个,则对每个sequence中对应的元素 ...
- day16 web前端之JavaScript
页面布局补充 样例页面: 示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- 盘点Apache毕业的11个顶级项目
自1999年成立至今,Apache 软件基金会已成功建立起自己强大的生态圈.其社区涌现了非常多优秀的开源项目,同时有越来越多国内外项目走向这个国际开源社区进行孵化.据悉,目前所有的 Apache 项目 ...