可以将按钮设为文件上传按钮吗？
sun*_*nny 11 javascript php forms jquery file-upload
我是php新手.我有一个表单,我在其上放置一个按钮值,Upload MB当用户点击此按钮时,它会重定向到Web表单上,我在此处放置文件上传控件和用户上载文件.这是图像
单击此按钮后,用户可以在此表单上重定向
这里是用户上传文件.
我的问题
是否可以将我的按钮Upload Mb设为文件上传按钮？它可以像文件上传控制按钮一样工作吗？
其实我想节省用户时间.我希望当用户点击Upload MB按钮时它不会重定向到表单上.但是当用户单击Upload MB按钮时,它允许用户上传文件并打开浏览窗口.之后,当用户上传文件时,它会在表单上重定向.
你们能告诉我这是否有可能？
Shr*_*kla 25
您可以保留<input type='file' hidden/>代码并在用户单击"Upload MB"按钮时使用javascript单击它.
看看这个小提琴.
这是片段.
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>
Ban*_*cid 12
我对这个主题的 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 处理的引用保持活动状态。
小智 6
我建议将按钮转换为标签。将 css 应用于标签，使其看起来像按钮。
例如——
<input type="file" id="BtnBrowseHidden" name="files" style="display: none;" />
<label for="BtnBrowseHidden" id="LblBrowse">
Browse
</label>
- 从辅助功能的角度来看，这不起作用 - 仅使用键盘的用户将无法打开您的文件输入，因为标签无法接收焦点。将标签制作为按钮也不起作用：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#Accessibility_concerns。不幸的是，因为否则这是一个非常干净的解决方案。 (2认同)