是否可以制作一个按钮作为文件上传按钮？
Posted
技术标签:
【中文标题】是否可以制作一个按钮作为文件上传按钮？【英文标题】：Is it Possible to make a button as File upload Button? 【发布时间】：2015-10-20 00:16:57 【问题描述】：我是 php 新手。我有一个表单，我在其上放置了一个按钮 Value as Upload MB，当用户单击此按钮时，它会重定向到我在此处放置文件上传控件和用户上传文件的 Web 表单。
这是图片
点击此按钮后，用户在此表单上重定向
这里用户上传文件。
我的问题
我可以将我的按钮Upload Mb 设为文件上传按钮吗？可以像文件上传控制按钮一样工作吗？
其实我想节省用户时间。我希望当用户单击 Upload MB 按钮时它不会重定向到表单。但是当用户单击Upload MB 按钮时，它允许用户上传文件并打开浏览窗口。之后，当用户上传文件时，它会在表单上重定向。
你们能告诉我这可能吗？
【问题讨论】：
为什么不保留文件上传控件来代替上传MB @GuruprasadRao acyully 我想节省用户时间，我希望用户直接上传文件而无需填写表单 这很令人困惑@sunny！你想节省用户时间，所以你不想重定向！我的建议是用file upload控制替换Upload MB！！
@GuruprasadRao 谢谢你的建议。请看下面的 Shrinivas 答案。实际上，我想要答案中的那个功能。在那个功能之后，我想在表单上重定向用户
一旦用户选择了您要重定向的文件？还是一旦上传到服务器？
【参考方案1】：
我的 2 美分主题：全部在代码中，无需向页面添加输入。
function onClickHandler(ev)
var el = window._protected_reference = document.createElement("INPUT");
el.type = "file";
el.accept = "image/*";
el.multiple = "multiple"; // remove to have a single file selection
// (cancel will not trigger 'change')
el.addEventListener('change', function(ev2)
// access el.files[] to do something with it (test its length!)
// add first image, if available
if (el.files.length)
document.getElementById('out').src = URL.createObjectURL(el.files[0]);
// test some async handling
new Promise(function(resolve)
setTimeout(function() console.log(el.files); resolve(); , 1000);
)
.then(function()
// clear / free reference
el = window._protected_reference = undefined;
);
);
el.click(); // open
#out
width: 100px; height: 100px; object-fit: contain; display: block;
/* hide if it would show the error img */
#out[src='']
opacity: 0;
<img src="" id="out" />
<button onClick="onClickHandler(event)">select an IMAGE</button>注意：el 可能会在您处理所有数据之前被垃圾收集 - 将其添加到 window.* 将使任何 Promise 处理的引用保持活动状态。
【讨论】：
最干净的【参考方案2】：引导方式
.choose_file
position: relative;
display: inline-block;
font: normal 14px Myriad Pro, Verdana, Geneva, sans-serif;
color: #7f7f7f;
margin-top: 2px;
background: white
.choose_file input[type="file"]
-webkit-appearance:none;
position:absolute;
top:0;
left:0;
opacity:0;
width: 100%;
height: 100%;
<div class="choose_file">
<button type="button" class="btn btn-default" style="width: 125px;">Choose Image</button>
<input name="img" type="file" accept="image/*" />
</div>【讨论】：
【参考方案3】：您可以在代码中保留<input type='file' hidden/>，并在用户点击"Upload MB"按钮时使用javascript点击它。
看看这个fiddle。
这里是sn-p。
document.getElementById('buttonid').addEventListener('click', openDialog);
function openDialog()
document.getElementById('fileid').click();
<input id='fileid' type='file' hidden/>
<input id='buttonid' type='button' value='Upload MB' />这是完整的代码。
<html>
<head>
<script>
function setup()
document.getElementById('buttonid').addEventListener('click', openDialog);
function openDialog()
document.getElementById('fileid').click();
document.getElementById('fileid').addEventListener('change', submitForm);
function submitForm()
document.getElementById('formid').submit();
</script>
</head>
<body onload="setup()">
<form id='formid' action="form.php" method="POST" enctype="multipart/form-data">
<input id='fileid' type='file' name='filename' hidden/>
<input id='buttonid' type='button' value='Upload MB' />
<input type='submit' value='Submit' />
</form>
</body>
</html>
【讨论】：
Shrinivas 上传文件后如何在表单上重定向？ 看看这个fiddle。您只需将表单控件包含在form 标记内。
重定向时是否携带文件？
当然，表单提交在重定向期间会将所有值传输到服务器。在服务器上，可以使用它们的name 属性访问这些值，在这种情况下为'filename'。
但是当我在浏览器中运行此代码时，因为我的 php 文件上传按钮不起作用【参考方案4】：
我建议将按钮转换为标签。将 css 应用于标签，使其看起来像按钮。
例如-
<input type="file" id="BtnBrowseHidden" name="files" style="display: none;" />
<label for="BtnBrowseHidden" id="LblBrowse">
Browse
</label>
【讨论】：
我喜欢这个 :) 从可访问性的角度来看，这不起作用 - 仅使用键盘的用户将无法打开您的文件输入，因为标签无法获得焦点。将标签变成按钮也不起作用：developer.mozilla.org/en-US/docs/Web/HTML/Element/…。不幸的是，否则这是一个非常干净的解决方案。【参考方案5】： <html>
<body>
<input type="file" id="browse" name="fileupload" style="display: none" onChange="Handlechange();"/>
<input type="hidden" id="filename" readonly="true"/>
<input type="button" value="Upload MB" id="fakeBrowse" onclick="HandleBrowseClick();"/>
</body>
<script>
function HandleBrowseClick()
var fileinput = document.getElementById("browse");
fileinput.click();
function Handlechange()
var fileinput = document.getElementById("browse");
var textinput = document.getElementById("filename");
textinput.value = fileinput.value;
</script>
</html>
【讨论】：
上传文件后如何在表单上重定向用户？以上是关于是否可以制作一个按钮作为文件上传按钮？的主要内容，如果未能解决你的问题，请参考以下文章