Question

我有一张未在IE中提交的表格。我只想隐藏图像上传按钮（文件类型）并显示自定义浏览按钮。我的文件上传没有显示。当我点击标签时，我调用文件点击事件并选择一个文件。但是当我提交页面时它没有提交它，在控制台中没有错误信息。它在firefox中运行良好。

这是我的代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html  xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="robots" content="index, follow" />
  <title>New world of interaction</title>

<script>
    function checkFields()
    {

        var fup = document.getElementById('authenticationimage');
        var fileName = fup.value;
        var ext = fileName.substring(fileName.lastIndexOf('.') + 1);
        if(ext == "jpg" || ext == "JPG")
        {
            return true;
        } 
        else
        {
            alert("Upload Jpeg image only");
            document.getElementById('imagename').innerHTML = '';
            return false;
        }
    }

    function readURL() {
        var fup = document.getElementById('authenticationimage');
        var fileName = fup.value;
        document.getElementById('imagename').innerHTML = fileName;
    }
    function removeimage() {

    document.getElementById('imagename').innerHTML = '';
    }
</script>
</head>
<body>
<table border="0" cellpadding="10" cellspacing="10" width="100%" align="center">
  <form action="test.php" method="post" enctype="multipart/form-data" onsubmit="return checkFields();">

            <tr>
              <td width="25%" style="padding-left:15px"><strong>Image</strong></td>
              <td width="75%">
               <table border="0">
               <tr><td style="border:1px solid #596166;"><label id="imagename" style="width:200px;display:inline-block;"></label></td>
               <td>
               <div class="ImageUpload">
                       <label for="authenticationimage" onclick="document.getElementById('authenticationimage').click();">
                          <img src="browse.png" alt="Browse" style="width:60px;cursor: pointer;"/>
                       </label>
                       <input id="authenticationimage" name="authenticationimage" type="file" onchange="readURL()" style="display:none"/>
                  </div>

               </td>
               </tr>

               </table>

              </td>
            </tr>
            <tr>
              <td></td>
              <td height="20"><input type="submit" name="submit" value="submit" />
              &nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" name="reset" onclick="removeimage();" value="reset">
              </td>
            </tr>
  </form>
</table>                        
</body>
</html>

Answer 1

使用css属性

完成

.select-wrapper {
  background: url('templates/ncrcorp/images/upload.png') no-repeat;
  background-size: cover;
  display: block;
  position: relative;
  width: 60px;
  height: 24px;
}
#authenticationimage {
  width: 60px;
  height: 24px;
  opacity: 0;
  cursor: pointer;
  filter: alpha(opacity=0); /* IE 5-7 */
}

and 

    <span class="select-wrapper">
                         <input id="authenticationimage" name="authenticationimage" type="file" onchange="readURL()" />
                       </span>

当我使用标签时，表格未在IE中提交

1 个答案: