2013-11-23 37 views
-1

我想在同一个表单上使用两个按钮,一个是上传文件,另一个按钮是提交表单,第一个显示下拉菜单以选择文件,然后调用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> 
+4

问题是? – adeneo

+0

问题或疑问是什么? – marekful

+0

那么,你更新了一个问题,但它很不清楚。你应该花一些时间并且非常清楚地解释你在问什么。我不知道是什么*“分开两个按钮的功能”*的意思。 –

回答

1

我不知道我完全理解这个问题,但我觉得你问如何配合不同的功能,每个按钮。如果这就是你所要求的,那么答案就像在其中一个按钮的onclick处理程序中分配不同的函数调用一样简单。代替一个submitForm()函数,编写两个函数...一个调用selectFile(),一个调用submitForm()。

相关问题