首页 >> js开发 >> jsVue触发input选取文件点击事件操作js大全
jsVue触发input选取文件点击事件操作js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
CSSCSS
.upload-btn-box {
margin-bottom: 10px;
button {
margin-right: 10px;
}
input[type=file] {
display: none;
}
}
.upload-btn-box {
margin-bottom: 10px;
button {
margin-right: 10px;
}
input[type=file] {
display: none;
}
}HTMLHTML
ScriptScript
choiceImg(){
this.$refs.filElem.dispatchEvent(new MouseEvent('click'))
},
getFile(){
var that = this;
const inputFile = this.$refs.filElem.files[0];
if(inputFile){
if(inputFile.type !== 'image/jpeg' && inputFile.type !== 'image/png' && inputFile.type !== 'image/gif'){
alert('不是有效的图片文件！');
return;
}
this.imgInfo = Object.assign({}, this.imgInfo, {
name: inputFile.name,
size: inputFile.size,
lastModifiedDate: inputFile.lastModifiedDate.toLocaleString()
})
const reader = new FileReader();
reader.readAsDataURL(inputFile);
reader.onload = function (e) {
that.imgSrc = this.result;
}
} else {
return;
}
}
choiceImg(){
this.$refs.filElem.dispatchEvent(new MouseEvent('click'))
},
getFile(){
var that = this;
const inputFile = this.$refs.filElem.files[0];
if(inputFile){
if(inputFile.type !== 'image/jpeg' && inputFile.type !== 'image/png' && inputFile.type !== 'image/gif'){
alert('不是有效的图片文件！');
return;
}
this.imgInfo = Object.assign({}, this.imgInfo, {
name: inputFile.name,
size: inputFile.size,
lastModifiedDate: inputFile.lastModifiedDate.toLocaleString()
})
const reader = new FileReader();
reader.readAsDataURL(inputFile);
reader.onload = function (e) {
that.imgSrc = this.result;
}
} else {
return;
}
}补充知识： vue下打包时几个文件选择文件打包一起 并做懒加载补充知识：补充知识： vue下打包时几个文件选择文件打包一起 并做懒加载直接上代码
const DeviceManage = r => require.ensure([], () => r(require(deviceManagePath + 'main/DeviceManage')), 'g-DeviceManage');
const SingleDeviceSet = r => require.ensure([], () => r(require(deviceManagePath + 'deviceSet/SingleDeviceSet')), 'g-DeviceManage');
const ModifyNo = r => require.ensure([], () => r(require(deviceManagePath + 'modifyNo/ModifyNo')), 'g-DeviceManage');
const PricePerTime = r => require.ensure([], () => r(require(deviceManagePath + 'pricePerTime/PricePerTime')), 'g-DeviceManage');
const SetParams = r => require.ensure([], () => r(require(deviceManagePath + 'setParams/SetParams')), 'g-DeviceManage');
const ShowDevicePrice = r => require.ensure([], () => r(require(deviceManagePath + 'showDevicePrice/ShowDevicePrice')), 'g-DeviceManage');
const parameterSetting = r => require.ensure([], () => r(require(deviceManagePath + 'parameterSetting/parameterSetting')), 'g-DeviceManage');
const SetParams3G = r => require.ensure([], () => r(require(deviceManagePath + 'setParams3G/SetParams3G')), 'g-Device3Gparams');
const DeviceManage = r => require.ensure([], () => r(require(deviceManagePath + 'main/DeviceManage')), 'g-DeviceManage');
const SingleDeviceSet = r => require.ensure([], () => r(require(deviceManagePath + 'deviceSet/SingleDeviceSet')), 'g-DeviceManage');
const ModifyNo = r => require.ensure([], () => r(require(deviceManagePath + 'modifyNo/ModifyNo')), 'g-DeviceManage');
const PricePerTime = r => require.ensure([], () => r(require(deviceManagePath + 'pricePerTime/PricePerTime')), 'g-DeviceManage');
const SetParams = r => require.ensure([], () => r(require(deviceManagePath + 'setParams/SetParams')), 'g-DeviceManage');
const ShowDevicePrice = r => require.ensure([], () => r(require(deviceManagePath + 'showDevicePrice/ShowDevicePrice')), 'g-DeviceManage');
const parameterSetting = r => require.ensure([], () => r(require(deviceManagePath + 'parameterSetting/parameterSetting')), 'g-DeviceManage');
const SetParams3G = r => require.ensure([], () => r(require(deviceManagePath + 'setParams3G/SetParams3G')), 'g-Device3Gparams');这么写 所有g-DeviceManage的文件会被打包在一起以上这篇Vue触发input选取文件点击事件操作就是小编分享给大家的全部内容了，希望能给大家一个参考。
.upload-btn-box {
margin-bottom: 10px;
button {
margin-right: 10px;
}
input[type=file] {
display: none;
}
}
.upload-btn-box {
margin-bottom: 10px;
button {
margin-right: 10px;
}
input[type=file] {
display: none;
}
}HTMLHTML
choiceImg(){
this.$refs.filElem.dispatchEvent(new MouseEvent('click'))
},
getFile(){
var that = this;
const inputFile = this.$refs.filElem.files[0];
if(inputFile){
if(inputFile.type !== 'image/jpeg' && inputFile.type !== 'image/png' && inputFile.type !== 'image/gif'){
alert('不是有效的图片文件！');
return;
}
this.imgInfo = Object.assign({}, this.imgInfo, {
name: inputFile.name,
size: inputFile.size,
lastModifiedDate: inputFile.lastModifiedDate.toLocaleString()
})
const reader = new FileReader();
reader.readAsDataURL(inputFile);
reader.onload = function (e) {
that.imgSrc = this.result;
}
} else {
return;
}
}
choiceImg(){
this.$refs.filElem.dispatchEvent(new MouseEvent('click'))
},
getFile(){
var that = this;
const inputFile = this.$refs.filElem.files[0];
if(inputFile){
if(inputFile.type !== 'image/jpeg' && inputFile.type !== 'image/png' && inputFile.type !== 'image/gif'){
alert('不是有效的图片文件！');
return;
}
this.imgInfo = Object.assign({}, this.imgInfo, {
name: inputFile.name,
size: inputFile.size,
lastModifiedDate: inputFile.lastModifiedDate.toLocaleString()
})
const reader = new FileReader();
reader.readAsDataURL(inputFile);
reader.onload = function (e) {
that.imgSrc = this.result;
}
} else {
return;
}
}补充知识： vue下打包时几个文件选择文件打包一起 并做懒加载补充知识：补充知识： vue下打包时几个文件选择文件打包一起 并做懒加载直接上代码
const DeviceManage = r => require.ensure([], () => r(require(deviceManagePath + 'main/DeviceManage')), 'g-DeviceManage');
const SingleDeviceSet = r => require.ensure([], () => r(require(deviceManagePath + 'deviceSet/SingleDeviceSet')), 'g-DeviceManage');
const ModifyNo = r => require.ensure([], () => r(require(deviceManagePath + 'modifyNo/ModifyNo')), 'g-DeviceManage');
const PricePerTime = r => require.ensure([], () => r(require(deviceManagePath + 'pricePerTime/PricePerTime')), 'g-DeviceManage');
const SetParams = r => require.ensure([], () => r(require(deviceManagePath + 'setParams/SetParams')), 'g-DeviceManage');
const ShowDevicePrice = r => require.ensure([], () => r(require(deviceManagePath + 'showDevicePrice/ShowDevicePrice')), 'g-DeviceManage');
const parameterSetting = r => require.ensure([], () => r(require(deviceManagePath + 'parameterSetting/parameterSetting')), 'g-DeviceManage');
const SetParams3G = r => require.ensure([], () => r(require(deviceManagePath + 'setParams3G/SetParams3G')), 'g-Device3Gparams');
const DeviceManage = r => require.ensure([], () => r(require(deviceManagePath + 'main/DeviceManage')), 'g-DeviceManage');
const SingleDeviceSet = r => require.ensure([], () => r(require(deviceManagePath + 'deviceSet/SingleDeviceSet')), 'g-DeviceManage');
const ModifyNo = r => require.ensure([], () => r(require(deviceManagePath + 'modifyNo/ModifyNo')), 'g-DeviceManage');
const PricePerTime = r => require.ensure([], () => r(require(deviceManagePath + 'pricePerTime/PricePerTime')), 'g-DeviceManage');
const SetParams = r => require.ensure([], () => r(require(deviceManagePath + 'setParams/SetParams')), 'g-DeviceManage');
const ShowDevicePrice = r => require.ensure([], () => r(require(deviceManagePath + 'showDevicePrice/ShowDevicePrice')), 'g-DeviceManage');
const parameterSetting = r => require.ensure([], () => r(require(deviceManagePath + 'parameterSetting/parameterSetting')), 'g-DeviceManage');
const SetParams3G = r => require.ensure([], () => r(require(deviceManagePath + 'setParams3G/SetParams3G')), 'g-Device3Gparams');这么写 所有g-DeviceManage的文件会被打包在一起以上这篇Vue触发input选取文件点击事件操作就是小编分享给大家的全部内容了，希望能给大家一个参考。
相关文章:
- js使用vant的地域控件追加全部选项js大全
- jsVant 在vue-cli 4.x中按需加载操作js大全
- jsReact Ant Design树形表格的复杂增删改操作js大全
- js在vue中使用vant TreeSelect分类选择组件操作js大全
- jsvantUI 获得piker选中值的自定义ID操作js大全
- jsReact Native登录之指纹登录篇的示例代码js大全
- js如何在vue中使用百度地图添加自定义覆盖物（水波纹）js大全
- jsvue 动态添加class,三个以上的条件做判断方式js大全
- jsvue+elementUI中表格高亮或字体颜色改变操作js大全
- jsVue绑定用户接口实现代码示例js大全
刚刚发布热门点击发布时间
- [02/23]chrome 浏览器插件外包:定制您的专属Chrome插件！专业外包团队助您轻松实现创意！
- [02/23]专业电脑浏览器插件外包服务，助力企业数字化转型！
- [02/23]解放双手，效率翻倍！Chrome插件前端自动化外包服务，助您轻松实现业务流程自动化！
- [02/23]定制您的专属Chrome插件！专业外包团队助您轻松实现创意！
- [02/23]Chrome插件外包：为你的浏览器赋能，开启无限可能
- [09/06]node js 调用kimi 接口批量生成网页
- [07/21]Node.js数据采集外包服务-数据采集专家-用Node.js释放数据的力量
- [07/21]专业前端开发-从PSD到响应式网页的无缝转换
- [07/18]专业Chrome插件开发- 为您的业务插上翅膀
- [07/18]智能数据抓取 -浏览器插件接口抓取服务外包
- [07/17]vue3 setup 监听url变化
- [07/17]git 回滚到指定 commit
- [07/15]浏览器插件使用场景:浏览器插件在数据抓取方面的使用场景非常广泛
- [07/15]Chrome 浏览器插件的使用场景
- [07/15]Chrome 浏览器插件开发的特点
