form表单的target用法

本文介绍了一种通过Ajax技术实现在CMS系统中图片预览的方法。具体地,该方法利用了一个隐藏的iframe来避免上传图片时页面发生跳转,同时保持了良好的用户体验。

近来的一个项目非常复杂,基本上算是一个小的桌面了,一个页面里几乎完成了所有的cms模板操作。具有一定的所见即所得功能。

当然这种页面肯定不难想象是使用ajax来做,页面中有个地方是单独上传图片,然后并不保存到数据库,而是有一个提前预览的效果。那就是先把图片 upload到服务器上的一个临时目录,并给出页面上一个预览效果。等用户保存,在把图片移到真正的上传图片目录并把地址写入数据库。单独上传图片的这个 地方,是可以用ajax来实现的。但是我们用了一个提交的form,即当用户点击预览的时候,用form传统的post的方式传递数据。代码片断如下:

<form enctype = 'multipart/form-data' method="post" action=/front/imageupload name='imageupload' id='imageupload'><input name="userfile" type="file" size="15" /><input type="hidden" name="pictureId" value="item_img"></form>

这样无论target设置成什么,提交以后都会跳转到域名/front/imageupload/。

为了不让提交以后页面跳转,我们在页面底部增加了一个隐藏得frame,

<iframe name="uploadcallback" id="uploadcallback" src="<?php echo "http://localhost".$this->baseUrl."/slot/imageupload ";?>" style="width:0px;height:0px;border:0px;"></iframe>

在把form中的target属性改成隐藏iframe的name。这样就看不到页面的跳转了。

在 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]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值