如何使文件上传按钮变灰,直到选中文件

时间:2019-01-29 17:54:56

标签: jquery html

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('form.html');
        
}

function uploadFiles(form) {
  
  try {
    
    var dropbox = "Work_Collector";
    var folder, folders = DriveApp.getFoldersByName(dropbox);
    
    if (folders.hasNext()) {
      folder = folders.next();
    } else {
      folder = DriveApp.createFolder(dropbox);
    }
    
    var blob = form.myFile;    
    var file = folder.createFile(blob);    
    file.setDescription("Uploaded by " + form.myName);
        
    return "File uploaded successfully " + file.getUrl();
    
  } catch (error) {
    
    return error.toString();
  }
  
}
<!doctype html>
<style type="text/css"> 
body {
	background-color: #ffffff; 
}
</style> 
<BR>
<BR>
<BR>
<div align="center">
  <p><img src= "https://b627cc12-a-62cb3a1a-s-sites.googlegroups.com/site/imagehosting199/home/GoogleTeamColorSmall.png" ></p>
  <table width="459" border="0">
    <tbody> 
      <tr>
        <td width="462"><div align="center">
          <hr>
        </div>
          <div align="center">
          <form id="myForm" align="start">
            <input type="text" name="myName" placeholder="INSTAGRAM HANDLE..">
            <form action="#" method="post">
        <input type="file" name="myFile"/>
        <input type="submit" value="Submit File"          
             onclick="this.value='Submitting...';
                    google.script.run.withSuccessHandler(fileUploaded)
                    .uploadFiles(this.parentNode);
                    return false;">
                    
<html>
<head>
<script src="https://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script>
        $ (document).ready ( function(){
        $('input:submit').attr('disabled',true);
        $('input:file').change(
            function(){
                if ($(this).val()){
                    $('input:submit').removeAttr('disabled'); 
                }
                else {
                    $('input:submit').attr('disabled',true);
                }
            });
    }); 
    <script> 
                     
          </form>
          <div id="output"></div> 
          <script> 
    function fileUploaded(status) {
        document.getElementById('myForm').style.display = 'none'; 
        document.getElementById('output').innerHTML = status; 
    } 
          </script>
        <style>  
 input{ display:inline-block; margin:20px;}
 
          </style>
        <hr></td>
      </tr>
    </tbody>
  </table>
  <h3>&nbsp;</h3>
  <p>&nbsp;</p>
</div>

我不是程序员,也没有编码方面的培训,所以请问如果我的问题太天真了,请原谅。 ..我很想让我从网上获得的这个Google脚本正常工作。在文件上传之前,我需要将“提交”按钮设为灰色。我正在从Google调用jquery库,然后尝试在html中创建脚本。如果我在.js文件中运行相同文件,则不会有任何问题...

 <table width="459" border="0">
    <tbody> 
      <tr>
        <td width="462"><div align="center">
          <hr>
        </div>
          <div align="center">
          <form id="myForm" align="start">
            <input type="text" name="myName" placeholder="INSTAGRAM HANDLE..">
            <form action="#" method="post">
        <input type="file" name="myFile"/>
        <input type="submit" value="Submit File"          
             onclick="this.value='Submitting...';
                    google.script.run.withSuccessHandler(fileUploaded)
                    .uploadFiles(this.parentNode);
                    return false;">
                    
<html>
<head>
<script src="https://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script>
        $ (document).ready ( function(){
        $('input:submit').attr('disabled',true);
        $('input:file').change(
            function(){
                if ($(this).val()){
                    $('input:submit').removeAttr('disabled'); 
                }
                else {
                    $('input:submit').attr('disabled',true);
                }
            });
    });                   
                     
          </form>
          <div id="output"></div> 
          <script> 
    function fileUploaded(status) {
        document.getElementById('myForm').style.display = 'none'; 
        document.getElementById('output').innerHTML = status; 
    } 
          </script>
        <style>  
 input{ display:inline-block; margin:20px;}
 
          </style>
        <hr></td>
      </tr>
    </tbody>
  </table>
  <h3>&nbsp;</h3>
  <p>&nbsp;</p>
</div>

1 个答案:

答案 0 :(得分:1)

我认为您忘记了关闭脚本标签。也许这就是为什么您得到此错误。

<script>
    $ (document).ready ( function(){
    $('input:submit').attr('disabled',true);
    $('input:file').change(
        function(){
            if ($(this).val()){
                $('input:submit').removeAttr('disabled'); 
            }
            else {
                $('input:submit').attr('disabled',true);
            }
        });
});   
</script>