Question

我正在尝试测试从表单中获取图片大小，而不是提交表单，我想防止默认，而是显示警告。

这是我的剧本：

<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（）; 有什么理由不在这里工作吗？它处于正确的位置吗？

Answer 1

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

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

注意：

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

Answer 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>

jQuery防止默认不能处理表单提交

2 个答案:

注意：