Question

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

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>

Answer 1

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

使用相同形式的两个按钮

1 个答案: