form表单target的用法

本文详细介绍了使用form表单的target属性实现当前页面表单提交而不进行跳转刷新的方法,通过将表单提交结果显示在特定的iframe中,达到无刷新效果。
偶然有一机会发现form表单的target的用法,可以实现当前页表单提交而不进行跳转刷新。代码如下,首页在页面里准备一form表单和一iframe

<form action="提交的action" method="post" target="theID">
.....................
</form>
<iframe name="theID" style="display: none;"></iframe>

提交到action后,action返回一串javascript语句

String script = "<script>alert('ok!');</script>";
response.getOutputStream().write(script.getBytes("utf-8"));

alert('ok')将在当前页执行。原理是form提交后的结果在target指定的iframe里执行
而iframe将其隐藏。这样提交后的效果就和无刷新的效果一样。
HTML 表单中,`<input type="file">` 用于允许用户从本地设备选择文件并上传到服务器。这种输入类型常用于图片上传、文档提交等场景。 ### 基本用法 最基础的 `<input type="file">` 实现如下: ```html <form action="/upload" method="post" enctype="multipart/form-data"> <input type="file" name="profile_pic" id="profile_pic"> <button type="submit">提交</button> </form> ``` - `name` 属性是表单数据提交时的键名。 - `id` 通常与 `<label>` 标签的 `for` 属性关联,实现点击标签选择文件的功能。 - `enctype="multipart/form-data"` 是必须设置的属性值,用于确保浏览器正确编码文件数据发送到服务器 [^2]。 ### 多文件上传 可以通过添加 `multiple` 属性来支持一次选择多个文件: ```html <input type="file" name="profile_pic" id="profile_pic" multiple> ``` 当启用多选功能后,用户可以按住 Ctrl 或 Shift 键选择多个文件,或者在支持的系统上直接拖放多个文件 [^3]。 ### 文件类型限制 通过 `accept` 属性可以限制用户只能选择特定类型的文件。例如,以下代码限制了只能上传图片文件(.jpg, .jpeg, .png): ```html <input type="file" name="profile_pic" id="profile_pic" accept=".jpg,.jpeg,.png"> ``` 这样能有效减少用户上传错误格式文件的可能性 [^1]。 ### 自定义样式 原生的 `<input type="file">` 控件样式较为简陋,通常需要自定义外观。一种常见做法是隐藏原生控件,使用 `<label>` 绑定到该控件,并为其设计美观样式: ```html <div class="upload-container"> <label class="custom-upload-button" for="fileUpload">选择文件</label> <input type="file" id="fileUpload" onchange="handleFileUpload(event)"> </div> ``` CSS 可以设置 `.custom-upload-button` 的样式,同时将 `<input type="file">` 设置为 `opacity: 0` 来覆盖在按钮之上,从而实现点击按钮触发文件选择框的效果 [^4]。 ### 提交前判断 在实际项目中,可能需要在提交前对文件进行一些校验,例如文件大小、格式等。可以通过 JavaScript 在文件选择后立即执行验证逻辑: ```javascript document.getElementById('fileUpload').addEventListener('change', function(event) { const file = event.target.files[0]; if (file.size > 2 * 1024 * 1024) { // 限制文件最大为 2MB alert('文件太大,请选择小于 2MB 的文件'); event.target.value = ''; // 清空已选文件 } }); ``` 上述代码在用户选择文件后会检查其大小,如果超过限制则提示用户重新选择 [^5]。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值