使用js设置form 表单的action

本文介绍如何在不改动后台代码的前提下,利用JavaScript动态修改form表单的Action属性,实现同一页面中不同对象的文件上传至指定的不同路径。通过识别文件输入框ID,调整上传路径参数,有效避免了后台公共方法的重复修改。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一般情况下,在一个form表单里所有上传图片或文档都默认存放在同一个路径,但有时候需要在同一个界面里不同的对象文档上传后存放在不同的路径下,因此,在不更改后台代码的情况下,我们可以用js来变更form表单的action 达到目的。

form表单信息如下:

 <form name="Work_Form" id="Work_Form" method="post"
			action="后台访问路径和传参" 
            enctype="multipart/form-data" method="post" target="hidden_frame">  
  <table>
					<tr>
							<td >
								图片:
							</td>
							<td colspan="5">
								 <input type="hidden" name="cover" />
		                         <iframe name='hidden_frame' id="hidden_frame" style='display:none'></iframe> 
								 <input type="text" id="PICTION1" name="PICTION1" style="width: 630px" />
		                         <span class="file button">浏 览
		                           	<input type="file" id="filename" name="filename" class="hifile"
									onchange="senduploadIMG('filename','PICTION1');return false;" />
							  	 </span>
								<input onclick="Downfile();return false;" type="button" value="下载.."/>
					 
							</td>
						</tr>

						<tr>
							<td >
								文档:
							</td>
							<td colspan="5">
								 <input type="hidden" name="cover" />
		                         <iframe name='hidden_frame' id="hidden_frame" style='display:none'></iframe> 
								 <input type="text" id="PICTION2" name="PICTION2" style="width: 630px" />
		                         <span class="file button">浏 览
		                           	<input type="file" id="filename2" name="filename2" class="hifile"
									onchange="senduploadIMG('filename2','PICTION2');return false;" />
							  	 </span>
								<input onclick="Downfile();return false;" type="button" value="下载.."/>
				 
							</td>
						</tr>

	</table>

	</form>

使用js 变更action 传入后台的参数:

  //图片,或文档上传,
		function senduploadIMG(filename,imgname){
			//识别标签名,不同的标签设置不同的路径参数
			if(filename=="PICTION2){
				//	 文件上传存放的路径  
			    document.getElementById('Work_Form').action = "后台访问路径和文档存放的路径参数";  
				 document.getElementById("Work_Form").submit(); 
				    //然后调用上传方法
	            upload('WorkFlowPoint_Form',filename,'msg',imgname,imgname);
			}else{
		        //默认的路径
			    document.getElementById('Work_Form').action = "后台访问路径和图片存放的路径参数";  
				 document.getElementById("Work_Form").submit(); 
				   //然后调用上传方法
				  upload('WorkFlowPoint_Form',filename,'msg',imgname,imgname);
			}
		 
		}

一般系统都有封装好的后台方法,因此我们只要修改对应的传参参数,即可达到效果,避免了后台公共方法的修改。

### 动态设置 HTML 表单的 `action` 属性 可以通过 JavaScript 来动态修改 HTML 表单的 `action` 属性值。以下是几种常见的实现方式: #### 使用原生 JavaScript 设置 `action` 值 可以利用 DOM 方法来访问并更改表单的 `action` 属性。例如,通过 `getElementById` 获取表单对象,并直接设置其 `action` 属性。 ```javascript function setActionUsingElement() { document.getElementById('myform').action = 'new_url'; } ``` 此方法简单直观,适用于大多数场景[^1]。 另一种方式是通过 `attributes` 对象操作属性值: ```javascript function setActionUsingAttributes() { document.getElementById('myform').attributes['action'].value = 'new_url'; } ``` 这种方式同样有效,但在某些浏览器中可能表现略有差异[^3]。 #### 使用 jQuery 修改 `action` 属性 如果项目中已经引入了 jQuery 库,则可以更简洁地完成相同功能。通过 `.attr()` 方法可以直接更新指定元素的属性值。 ```javascript function setActionWithJQuery() { $('form').attr('action', 'new_url'); } ``` 这种方法不仅语法更加紧凑,而且兼容性较好,在处理复杂页面结构时尤为有用[^2]。 对于需要根据不同条件改变提交地址的情况,也可以编写逻辑判断语句嵌入到上述函数内部执行相应动作后再调用 submit 进行数据发送[^4]。 #### 后端语言配合前端调整 Action 地址 虽然主要讨论的是客户端技术方案,但实际上有时也会结合服务器端渲染预先定义好部分路径参数再传递给视图层供最终组装完整的 URL 链接使用。比如 PHP 中可能会这样写: ```php <?php $path="/your/dynamic/path"; ?> <form id="dynamicForm" action="<?php echo htmlspecialchars($path); ?>" method="post"> </form> <script type="text/javascript"> var path='<?php echo json_encode($path); ?>'; function changePath(){ document.getElementById('dynamicForm').action=path+'/update'; } </script> ``` 这里展示了如何从服务端传入变量至模板文件里被 JS 脚本读取从而灵活控制实际请求目标位置的例子。 ### 注意事项 无论采用哪种手段,请务必注意转义特殊字符防止 XSS 攻击等问题发生;另外还要考虑跨域限制等因素影响正常流程运作情况下的应对策略设计。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值