Javascript 是否可以制作一个按钮作为文件上传按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31693296/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it Possible to make a button as File upload Button?
提问by sunny
I am new in php. I have a form on which i place a button Value as Upload MBwhen user click on this button it redirects on a web form where i place a file upload control and user upload file here.
Here is image
我是 php 新手。我有一个表单，我在其中放置了一个按钮值，因为Upload MB当用户单击此按钮时，它会重定向到我在此处放置文件上传控件和用户上传文件的 Web 表单上。这是图像
After clicking this button user redirect on this form
单击此按钮后，用户重定向到此表单
here user upload file.
这里用户上传文件。
MY QUESTION
我的问题
Is it possible that can i make my button Upload Mbas file upload button? Can it works like file upload control button?
我可以将我的按钮Upload Mb设为文件上传按钮吗？它可以像文件上传控制按钮一样工作吗？
Actually i want to save user time. I want that when user click on Upload MBbutton it not redirects on Form. But when user Click on Upload MBbutton it allow to user to upload file and open browsing window. After that when user upload file it redirects on form.
其实我想节省用户时间。我希望当用户点击Upload MB按钮时它不会重定向到表单上。但是当用户单击Upload MB按钮时，它允许用户上传文件并打开浏览窗口。之后，当用户上传文件时，它会在表单上重定向。
Can you guys tell me it is possible or not?
你们能告诉我可能还是不可能吗？
回答by Shrinivas Shukla
You can keep a <input type='file' hidden/>in your code and click it using javascript when the user clicks on the "Upload MB"button.
您可以<input type='file' hidden/>在代码中保留 a并在用户单击"Upload MB"按钮时使用 javascript 单击它。
Check out this fiddle.
看看这个小提琴。
Here is the snippet.
这是片段。
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' />Here is the complete code.
这是完整的代码。
<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>
回答by Prasad Shigwan
I would suggest to convert button to label. apply the css to label so that it looks like button.
我建议将按钮转换为标签。将 css 应用于标签，使其看起来像按钮。
e.g. -
例如——
<input type="file" id="BtnBrowseHidden" name="files" style="display: none;" />
<label for="BtnBrowseHidden" id="LblBrowse">
Browse
</label>
回答by Prasad Shigwan
Bootstrap Way
引导方式
.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>回答by BananaAcid
my 2 cents to the topic: all in code, no input needs to be added to the page.
我的 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>Note: the elmight get garbage collected, before you process all data - adding it to window.*will keep the reference alive for any Promise-handling.
注意：在el处理所有数据之前，可能会被垃圾收集 - 将其添加到window.*将使引用保持活动状态以进行任何 Promise 处理。
回答by Salim Malik
<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>
