单个按钮上的html文件上传和操作

Question

这是我的html表单：

<button name="upload_inventory" id="upload_inventory" class="btn btn-purple btn-labeled fa">Upload Inventory</button>

我想将它用于文件打开对话框，而不是使用

<input type="file" name="upload_inventory" id="upload_inventory" class="btn btn-purple btn-labeled fa">

怎么做？

如果我使用按钮标签，它看起来像这样：

如果我使用输入标签，它看起来像这样：

还有如何使用按钮元素内的提交？

Answer 1

您必须保留一个＆＃34;输入类型文件＆＃34;并在用户

之前隐藏它

    <input id="hideupload" name="hideupload" 
    type="file"  onChange="doFileText()" style="display:none; "/>
    <button onClick="doFile()" name="upload_inventory" 
    id="upload_inventory" class="btn btn-purple btn-labeled fa">Upload` Inventory</button>

现在您必须在单击按钮时触发文件单击事件，以便打开文件对话框。

<script>
function doFile()
{
var x=$('#hideupload');
x.trigger( 'click' );
}
</script>

或使用Pure JS

function doFile()
    {
    var x=document.getElementById('hideupload');
    x.click();
    }

LIVE http://jsfiddle.net/mailmerohit5/m4cny75b/