Question

我是php新手。我有一个表单，我在其中放置一个按钮值为Upload MB，当用户点击此按钮时，它会重定向到Web表单上，我在此处放置文件上传控件和用户上载文件。这是图像

点击此按钮后，用户可以在此表单上重定向

此处是用户上传文件。

我的问题

我可以将按钮Upload Mb作为文件上传按钮吗？它可以像文件上传控制按钮一样工作吗？

其实我想节省用户时间。我希望当用户点击Upload MB按钮时，它不会重定向到表单上。但是当用户点击Upload MB按钮时，它允许用户上传文件并打开浏览窗口。之后，当用户上传文件时，它会在表单上重定向。

你们能告诉我这是否可能？

Answer 1

您可以在代码中保留<input type='file' hidden/>，并在用户点击 "Upload MB" 按钮时使用javascript点击它。

查看此fiddle。

以下是摘录。

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>

Answer 2

Bootstrap Way

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

Answer 3

 <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>

Answer 4

我建议将按钮转换为标签。将css应用于标签，使其看起来像按钮。

e.g。 -

        <input type="file" id="BtnBrowseHidden" name="files" style="display: none;" />
        <label for="BtnBrowseHidden" id="LblBrowse">
            Browse
        </label>

Answer 5

我对主题的2美分：全部用代码编写，无需在页面上添加任何输入。

function onClickHandler(ev) {
    var el = document.createElement("INPUT");
    el.type = "file";
    el.accept = "image/*";
    // el.multiple = "multiple";

    el.addEventListener('change', function(ev2) {
      // play sound?
      // access el.files[] to do something with it (test its length!)
    });

    el.click(); // open
}

是否可以将按钮设为文件上传按钮？

5 个答案: