php - 连接两种不同形式的上传和提交按钮
问题描述
我正在格式化一个表格,其中有一列 ACTION 包含上传、下载、交付、拒绝等操作。现在我需要将其分成两列,如 UPLOAD(上传、下载)和 ACTION(交付和拒绝)。现在的问题是上传和交付的功能是一种形式。
<td class="content-writing-action">
@if($data->status==2 || $data->status==0)
<form action="{{ route('upload-content') }}" method="post" enctype="multipart/form-data" class="form-sty form-button ">
{{ csrf_field() }}
<input type="hidden" name="id" value="{{ $data->id }}">
<div class="choose_file">
<a><i class="fa fa-upload"></i></a>
<input name="attachment" id="attachment" type="file" accept=".doc,.docx,.txt,.pdf" required/>
</div>
<button id="submit" class="content-writing-btn"><i class="fa fa-check"></i></button>
</form>
<form action="{{route('content.reject')}}" id="rejectForm" method="post"
enctype="multipart/form-data"
class="form-sty form-button ">
{{csrf_field()}}
<input type="hidden" value="{{$data->id}}" name="reject_id">
{{-- <textarea required placeholder="Enter your reason to reject the order." style="display: none;" class="form-control reject_reason" name="reject_reason_{{$data->id}}" id="reject_reason_{{$data->id}}" rows="2"></textarea>--}}
<i class="fas fa-times text-danger website_reject reject_reason"
id="reject_{{$data->id}}"
></i>
</form>
@endif
</td>
现在,我怎样才能将上传和提交的功能变成两种不同的形式?如何将一个表单的上传按钮连接到另一个表单的提交按钮。谢谢
解决方案
在纯 html 中,输入标签的值只能传递给它自己的表单。如果你想要一个单一的输入类型文件,你将不得不使用一些 JavaScript 来处理你的按钮,例如:
getFormData = function() {
const input = document.getElementById('file');
const file = input.files[0];
const formData = new FormData();
formData.append("attachment", file);
return formData;
}
submitFileToUrl1 = function() {
const formData = getFormData();
fetch('/url1', {method: "POST", body: formData});
}
submitFileToUrl2 = function() {
const formData = getFormData();
fetch('/url2', {method: "POST", body: formData});
}
<input type="file" id="file">
<button onclick="submitFileToUrl1()">First action</button>
<button onclick="submitFileToUrl2()">Second action</button>
推荐阅读
- webservice-client - 使用 Ws 导入创建客户端不生成服务和端口类
- html - 防止子元素上的框阴影
- c - 如何在 ubuntu 上使用 Makefile 编译 C 程序?
- javascript - 使用 node.js 从本地服务器检索响应数据
- three.js - THREE.js 添加子弹作为精灵并单独旋转每个
- java - gradle 4.9 - gradlew 和 java 10 仍然得到:无法从 '10' 确定 java 版本
- angularjs - angularjs复选框控制台中的响应不正确
- tensorflow - ValueError:使用序列设置数组元素。(TensorFlow) 成本函数
- html - 改变html元素的位置?
- python - 在扫描操作期间为 dynamodb 更新 STS 凭据