Question

Internet Explorer让我遇到了与文件输入关联的上传按钮的大问题。

以下是处理普通提交按钮的功能：

<script type="text/javascript">                 
   $(function() {
      myClickHandler=function(e){
        if (!validation())
            return false;    
        if (!confirm("Are you sure you want to Proceed?" + "\n" ))
            return false;    
        return true;
    };  
    $('#QandA').submit(myClickHandler);
});

</script>

下面我将展示如何将imageuploadform附加到#QandA形式的表中：

jquery的：

function insertQuestion(form) { 
    var $image = $("<td class='image'></td>"); 
    var $fileImage = $("<form action='imageupload.php' method='post' 
                    enctype='multipart/form-data' target='upload_target_image'
                    onsubmit='return imageClickHandler(this);' 
                    class='imageuploadform' >" +
                    "Image File: <input name='fileImage' type='file' 
                    class='fileImage' /></label><br/><br/><label class='imagelbl'>" +
                    "<input type='submit' name='submitImageBtn' 
                    class='sbtnimage' value='Upload' /></label></form>");
    $image.append($fileImage);
    $tr.append($image);  
}

HTML（#QandA表格）：

   <form id="QandA" action="<?php echo htmlentities($action); ?>" method="post">

//Below is button where when clicked, it will append the image upload form into the table

<table id="questionBtn" align="center">
<tr>
<th>
<input id="addQuestionBtn" name="addQuestion" type="button" value="Add Question" onClick="insertQuestion(this.form)" />
</th>
</tr>
</table>

//image upload form is appended into table below:

<table id="qandatbl" align="center" cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
    <th class="image">Image</th>
</tr>
</thead>
</table>
<div id="qandatbl_onthefly_container">
<table id="qandatbl_onthefly" align="center" cellpadding="0" cellspacing="0" border="0">
<tbody>
</tbody>
</table>

    <p><input id="submitBtn" name="submitDetails" type="submit" value="Submit Details" /></p>

    </form>

如上所述，图片上传表单已附加到#QandA中，我相信因为这会导致myClickHandler=function(e)在点击“上传”按钮时被触发的问题，即使它根本不应该触发该功能。只有顶部表单中的“提交详细信息”按钮才会触发myClickHandler()功能。

所以我的问题是，为了只让Submit Details按钮触发myClickHandler()功能，我需要更改什么？

更新：

var $video = $("<td class='video'></td>"); 
var $fileVideo = $("<form action='videoupload.php' method='post' 
                enctype='multipart/form-data' target='upload_target_video'
                onsubmit='return videoClickHandler(this);' 
                class='videouploadform' >" +
                "Video File: <input name='fileVideo' type='file' 
                class='fileVideo' /></label><br/><br/><label class='videolbl'>" +
                "<input type='submit' name='submitVideoBtn' 
                class='sbtnvideo' value='Upload' /></label></form>");
$video.append($fileVideo);
$tr.append($video);  


        var $audio = $("<td class='audio'></td>"); 
var $fileAudio = $("<form action='audioupload.php' method='post' 
                enctype='multipart/form-data' target='upload_target_audio'
                onsubmit='return audioClickHandler(this);' 
                class='audiouploadform' >" +
                "Audio File: <input name='fileAudio' type='file' 
                class='fileAudio' /></label><br/><br/><label class='audiolbl'>" +
                "<input type='submit' name='submitAudioBtn' 
                class='sbtnaudio' value='Upload' /></label></form>");
$audio.append($fileAudio);
$tr.append($audio);

Answer 1

也许尝试click()：

$('#addQuestionBtn').click(function() { 
    insertQuestion(); 
    return false; 
});

要禁用任何其他按钮，只需使用：

$('.sbtnvideo, .any, .other, #element').click(function() {
    return false;
});

你也可以试试jQuery Form Plugin。

上传按钮是触发功能，不应该触发

1 个答案: