59、文件上传dom事件处理1
需积分: 0 162 浏览量
2022-08-04
12:58:03
上传
评论
收藏 230KB PDF 举报
《Symfony 5全⾯开发》视频教程代码仓库：https://github.com/teebbstudios/teebblog
2021/9/29
1 / 2
我
们
点
击
右
键
检
查
⼀下
按
钮
，
当
我
们
点
击
按
钮
时
，
⾸
先
会
获
取
表
单
⾏
的
DOM
元
素
，
然
后
再
获
取
DOM
元
素
的
data-prototype
的
值
。
就
是
⽂
件
上
传
的
原
型
代
码
，
再
将
原
型
代
码
中
的
__name__
进
⾏
⼀下
替
换
，
替
换
为
⽂
件
上
传
⾏
的
序
号
，
再
追
加到
表
单
⾏
中
。
为了
更
好
的
获
取
到
表
单
⾏
，
我
们
可
以
在
表
单
⾏
中
添
加
⼀个
样
式
类
。
回
到
项
⽬
，
打
开
C
o
mmen
t
T
yp
e
类
，
在
file
s
表
单
⾏
中
我
们
添
加
⼀个
attr
设
置
，
我
们
添
加
⼀个
样
式
类
，
样
式
类
的
名
称
我
们
叫
做
input-row-wrapper
。
回
到
浏
览
器
刷
新
，
现
在
表
单
⾏
中
添
加
了
⼀个
样
式
类
，
我
们
可
以
先
获
取
b
utto
n
按
钮
的
⽗
级
元
素
，
再
通过
⽗
级
元
素
来查
找
di
v
元
素
，
再
通过
di
v
元
素
获
取原
型
代
码
，
对
代
码
进
⾏
处
理
。
回
到
项
⽬
我
们
打
开
a
pp
.
j
s
⽂
件
，
在
r
ead
y
()
⽅
法
中
，
我
们
输
⼊
$('button.js-add-file-row-btn')
，
然
后
监
听
click
事件
，
添
加
⽅
法
，
我
们为
⽅
法添
加
⼀个
参
数
elemen
t
。
为了
节
省
时
间
，
我
这
⾥
就
直
接
粘
贴
写
好
的
代
码
了
。
#assets/app.js
// ...
$('button.js-add-file-row-btn').on('click', function (element) {
//
查
询
input-wrapper DOM
var fileInputWrapper = $(element.target).closest('fieldset.form-
group').find('div.input-row-wrapper');
//
获
取
当
前
input
⾏计
数
var inputCount = fileInputWrapper.children().length;
//
获
取
input prototype
并
进
⾏
序
号
修
改
var inputCode = fileInputWrapper.data('prototype');
inputCode = inputCode.replace(/__name__/g, inputCount);
fileInputWrapper.append(inputCode);
})
// ...
⾸
先
我
们
获
取
按
钮
的
⽗
级
元
素
，
再
查
找
.input-row-wrapper div
元
素
，
然
后
计
算
当
前
di
v
元
素
它
内
部
的
⽂
件
上
传
表
单
⾏
的
数
量
，
然
后
获
取
prototyp
e
原
型
代
码
。
再
对
原
型
代
码
中
的
__name__
字
符
串
进
⾏
⼀下
序
号
的
替
换
，
最
后
将
替
换
过
的
代
码
追
加到
di
v
元
素
中
。
我
们
打
开
控
制
台
，
确
保
资
源
开
发
服
务
器
已
经
启
⽤
，
并
且
刚刚
编
写
的
代
码
已
经
构
建
成
功
了
，
回
到
浏
览
器
我
们
刷
新
。
当
我
们
点
击
添
加
⽂
件
时
，
会
⾃
动
的
在
F
ile
s
表
单
⾏
中
添
加
⼀个
⽂
件
上
传
表
单
⾏
。
但
是
表
单
⾏
的
标
签
显
示
的
是
乱
码
，
我
们
可
以
让表
单
⾏
不
显
示
标
签
，
回
到
C
o
mmen
t
T
yp
e
，
我
们
设
置
entry_options
，
label
设
置
我
们
设
置
为
fal
s
e
，
回
到
浏
览
器
刷
新
。
添
加
⽂
件
，
现
在
就
可
以了
，
我
们
选
择
⼀个
⽂
件
，
b
ootstr
a
p
4
版
本
，
选
择
⽂
件
后
有
个
显
示
b
u
g
，
回
到
a
pp
.
j
s
⽂
件
，
我
们
直
接
粘
贴
修
复
b
u
g
的
代
码
。
#assets/app.js
// ...
window.fixFileInputName = function (element) {
评论0