使用相同形式的两个按钮

Using two buttons in the same form

本文关键字：两个 按钮      更新时间：2023-09-26

我试图在同一个表单上使用两个按钮，一个是上传文件，另一个是提交表单，第一个按钮显示下拉菜单以选择文件，然后调用post方法的操作。如何将两个按钮的功能分开？

Html

<div data-role="content" class="jqm-content">    
    <div class="jqm-home-welcome">
        <h2>Pleasurable</h2>
        <p class="ui-li-desc"> A place for all the good times</p>
        <form method="post" action="addsoothing" enctype="multipart/form-data"> 
            <button onclick="submitForm('addpic')">Click to Add pic</button>
            <output id="list"></output>    
            <input id="uploadImage" type="file" />
            <button onclick="submitForm('uploadimage')" id="files">Upload image</button>
        </form>    
    </div>     
</div>

JavaScript

<script>
    function submitForm(button) {
        if (button == 'addpic') {
            document.getElementById('uploadImage').click();
        } else if (button == 'uploadimage') {
            document.getElementById('files').addEventListener('change', handleFileSelect, false).click();
        }
        document.getElementById.submit();
    }
    if (window.FileReader) {
        function handleFileSelect(evt) {
            var files = evt.target.files;
            var f = files[0];
            var reader = new FileReader();
            reader.onload = (function(theFile) {
                return function(e) {
                    document.getElementById('list').innerHTML = ['<img src="', e.target.result, '" title="', theFile.name, '" width="50"/>'].join('');
                };
            })(f);
            reader.readAsDataURL(f);
        }
    } else {
        alert('This browser does not support FileReader');
    }

</script>

我不确定我是否完全理解这个问题，但我想你在问如何将不同的功能绑定到每个按钮上。如果这就是你要问的，那么答案很简单，只需在其中一个按钮的onclick处理程序中分配一个不同的函数调用。编写两个函数，而不是一个submitForm（）函数。。。一个调用selectFile（），另一个调用submitForm（）。

相关文章：