关于自定义一个上传的file按钮
2024-08-24 00:54:46
在input中html给我们一个 type file用来做文件上传的功能,比如
但是这样的样式,实在难看,在开发的时候看了layui和bootstrap的点击上传,都很不错。
前者的调用方式和js的差别太大,后者需要引入bootstrap fileinput.js 我都不是很满意,
后来写了一个原生的js来调用,话说我还是引用了layui的css样式,因为确实不错
看下代码
<input type="file" onchange="upload()" style="display:none" id="file-input" />
<button onclick='selectFile()'>上传</button>
这是没有引入layui的类之前的html,他的input type file是默认隐藏的,我们可以在
按钮上模拟input的点击事件
var inputBox = document.getElementById("file-input"); function selectFile(){
inputBox.click()
}
点击之后,input就相当于被点击,开始上传文件,当上传文件的时候,input上绑定的onchange();就开始生效了
这是一个加载的函数
function upload(){
//alert(123);
var file = inputBox.files[0]
if(! file){
alert('请选择文件')
return
}
var form = new FormData()
form.append('file',file)
var xhr = new XMLHttpRequest();
xhr.open("post", '../../api/receiveOptionQuestion', true);
xhr.onload = function () {
alert(xhr.responseText);
};
xhr.upload.addEventListener("progress", function(e){
console.log(e.loaded / e.total * 100)
}, false);
xhr.send(form);
}
在open方法中定义上传的接口,返回数据为responseText
加载数据的时候,绑定一个进度的事件,可以由e.loaded/e.total*100+"%"得到当前的进度(百分数)
最后传值
最新文章
- Ubuntu 14.04.4官方默认更新源sources.list
- java单例类/
- Eclipse在线安装SVN
- paip.提升稳定性---c3p0数据库连接池不能取到连接An attempt by a client to checkout a Connection has timed out
- HIVE: UDF应用实例
- H5小内容(四)
- MySQL(12):windows下解决mysql忘记密码
- Windows命令行(DOS命令)教程-3(转载)http://arch.pconline.com.cn//pcedu/rookie/basic/10111/15325_2.html
- HTML、XHTML和HTML5区别与联系
- Map,List,POJO深拷贝(序列化实现)方法与注意事项
- MySql在生产环境中是用mysqldump还是xtrabackup备份和恢复数据
- C++开发python windows版本的扩展模块示例
- bzoj3168 钙铁锌硒维生素 (矩阵求逆+二分图最小字典序匹配)
- json 函数
- 【转】Syncthing的安装与使用
- html5的audio实现高仿微信语音播放效果
- js传递数组
- ajax小知识
- WP8.1学习系列(第十七章)——Windows Phone重要图形、视觉指示器和通知
- python 本地化 local
热门文章
- 机器学习规则:ML工程最佳实践----rules_of_ml section 1【翻译】
- C#篇(三)——函数传参之引用类型和值类型
- poj2823/hdu3415 - 数据结构 单调队列
- T_SQL 日期函数
- git 和github 关联
- NodeJS学习笔记 进阶 (2)Nodejs进阶:MD5加密算法(ok)
- 紫书 例题 10-23 UVa 10213(欧拉公式+高精度)
- Objective-C中的同步线程的锁
- 千千万万的IT开发project师路在何方
- Xcode加入应用图标以及启动界面