jQuery防止默认在表单提交上不起作用答案

【问题标题】：jQuery prevent default not working on form submitjQuery防止默认在表单提交上不起作用
【发布时间】：2015-08-05 11:00:47
【问题描述】：

我正在尝试测试从表单获取图像大小，而不是提交表单，我想阻止默认设置，而是显示警报。

这是我的脚本：

<script type="text/javascript">
function Update1() {
    event.preventDefault();
    var fileUpload = document.getElementById("uploadfile");
    if (typeof (fileUpload.files) != "undefined") {
        var size = parseFloat(fileUpload.files[0].size / 1024).toFixed(2);
        alert(size + " KB.");
    } else {
        alert("This browser does not support HTML5.");
    }
}
</script>

这里是 HTML：

<form action="" method="post" enctype="multipart/form-data">              
<div class="owner-panel owner-panel-space-4">
    <div class="owner-panel-body">
        <div class="row">
            <div class="col-md-4">
                <h4>Image</h4>
            </div>
            <div class="col-md-8">
                <div class="input-group">
                    <span class="input-group-btn">
                        <span class="btn btn-danger btn-file">
                            Browse… <input id ="uploadfile" type="file" name="Image" multiple="">
                        </span> 
                    </span>
                    <input type="text" class="form-control filename" readonly="">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <h4>Caption</h4>
            </div>
            <div class="col-md-8">
                <input class="form-control image-caption-counted" type="text" name="ImageCaption" id="Imagecaption" />
                <h6 class="pull-right" id="image-caption-counter">40 characters remaining</h6>
            </div>
        </div>
    </div>
    <div class="owner-panel-footer">

        <button class="btn-u" type="submit" name="Action" value="Update1">Upload</button>         
    </div>     
</div>           
</form>

event.preventDefault(); 在这里不起作用有什么原因吗？位置是否正确？

【问题讨论】：

你试过了吗："function Update1(event) {" .... 你的 event.Preventdefault();不知道什么是事件

标签： jquery preventdefault

【解决方案1】：

你需要在函数args中传递事件：

Update1(event){
   //.....
}

注意：

我没有看到任何调用Update1() 函数的事件处理程序。

【讨论】：

【解决方案2】：

HTML

<form action="" method="post" enctype="multipart/form-data">              
<div class="owner-panel owner-panel-space-4">
    <div class="owner-panel-body">
        <div class="row">
            <div class="col-md-4">
                <h4>Image</h4>
            </div>
            <div class="col-md-8">
                <div class="input-group">
                    <span class="input-group-btn">
                        <span class="btn btn-danger btn-file">
                            Browse… <input id ="uploadfile" type="file" name="Image" multiple="">
                        </span> 
                    </span>
                    <input type="text" class="form-control filename" readonly="">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <h4>Caption</h4>
            </div>
            <div class="col-md-8">
                <input class="form-control image-caption-counted" type="text" name="ImageCaption" id="Imagecaption" />
                <h6 class="pull-right" id="image-caption-counter">40 characters remaining</h6>
            </div>
        </div>
    </div>
    <div class="owner-panel-footer">

        <button class="btn-u" type="submit" name="Action" value="Update1"  OnClientClick="Upload1(this);">Upload</button>         
    </div>     
</div>           
</form>

JQUERY

<script type="text/javascript">
function Update1(event) {
    event.preventDefault();
    var fileUpload = document.getElementById("uploadfile");
    if (typeof (fileUpload.files) != "undefined") {
        var size = parseFloat(fileUpload.files[0].size / 1024).toFixed(2);
        alert(size + " KB.");
    } else {
        alert("This browser does not support HTML5.");
    }
}
</script>

【讨论】：