Question

在表单中使用JCrop api时，会在释放拖动操作时触发提交事件。我无法弄清楚导致提交事件的原因。当这是由JCrop api引起时，有没有办法阻止表单提交？

html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script  src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="ImageLoading.js"></script>
<script src="http://jcrop-cdn.tapmodo.com/v2.0.0-RC1/js/Jcrop.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://jcrop-cdn.tapmodo.com/v2.0.0-RC1/css/Jcrop.css"></link>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<style>
    /* Make JCrop API responsive, this will set the size of the JCop API to the size of the container */
    #preview {
        width: 100% !important;
        height: auto !important;
    }

    .jcrop-active {
        width: 100% !important;
        height: auto !important;
    }
</style>

</head>
<body>

<form class="form-horizontal" onsubmit="console.log('form submitted!')">
    <div class="form-group">
        <label for="inputFile" class="col-lg-2 control-label">File</label>
            <div class="col-lg-10">
                <input type="text" id="inputFile" readonly class="form-control floating-label" placeholder="Browse...">
                <input type="file" name="image_file" id="image_file" accept="image/jpeg, image/png" onchange="fileSelectHandler()" multiple>
                <div class="row">
                  <div id="previewContainer" class="col-sm-4">
                    <img class="img-responsive" id="preview"/>
                  </div>
                </div>
            </div>
            <div class="info">
                <input type="text" id="croppingXCo" name="croppingXCo" value=""/>
                <input type="text" id="croppingYCo" name="croppingYCo" value=""/>
                <input type="text" id="croppingSideLength" name="croppingSideLength" value=""/>
            </div>
        </div>
    </div>
</form>

</body>
</html>

的javascript：

// Create variables (in this scope) to hold the Jcrop API and image size
var jcrop_api;
var scaleFactor;

// update info by cropping (onChange and onSelect events handler)
function updateInfo(e) {
    $('#croppingXCo').val(Math.floor(e.x*scaleFactor));
    $('#croppingYCo').val(Math.floor(e.y*scaleFactor));
    $('#croppingSideLength').val(Math.floor(e.w*scaleFactor));
    console.log(Math.floor(e.x*scaleFactor)) 
};

function fileSelectHandler() {
    // get selected file
    var imageFile = $("#image_file")[0].files[0];

    // preview element
    var image = $("#preview")[0];

    // prepare HTML5 FileReader
    var fileReader = new FileReader();
    fileReader.onload = function(e) {


        // e.target.result contains the DataURL which we can use as a source of the image
        image.src = e.target.result;
        image.onload = function () { // onload event handler

            //if jcrop_api was already initialized on 
            if(jcrop_api != undefined) {
                jcrop_api.destroy();
                jcrop_api = null;
            }

            var croppingParameters = new Array(3); // [x, y, w]

            image.removeAttribute("style");
            var imageWidth = image.clientWidth;
            var imageHeight = image.clientHeight;
            var imageSelectBorder = 10;

            // initialize setSelect-croppingparameters
            if(imageWidth >= imageHeight) {
                croppingParameters[0] = (imageWidth - imageHeight)/2;
                if(croppingParameters[0] < imageSelectBorder) croppingParameters[0] = imageSelectBorder;
                croppingParameters[1] = imageSelectBorder;
                croppingParameters[2] = imageHeight - (2 * croppingParameters[1]);
            } else {
                croppingParameters[0] = imageSelectBorder;
                croppingParameters[1] = (imageHeight - imageWidth + (2 * imageSelectBorder))/2;
                if(croppingParameters[1] < imageSelectBorder) croppingParameters[1] = imageSelectBorder;
                croppingParameters[2] = imageWidth - (2 * croppingParameters[0]);
            }

            initJCrop(croppingParameters);
        }
    }

    // read selected file as DataURL
    fileReader.readAsDataURL(imageFile);
}

function initJCrop(croppingParameters) {

    var image = $("#preview")[0];   
    var minWidth = (image.clientWidth/image.naturalWidth) * 128

    scaleFactor = image.naturalWidth/image.clientWidth;
    console.log(scaleFactor);

    $('#preview').Jcrop({
        minSize: [minWidth, minWidth], // min crop size
        setSelect: [croppingParameters[0], croppingParameters[1], croppingParameters[2], croppingParameters[2]], // Set an initial selection area
        aspectRatio: 1, // keep aspect ratio 1:1
        bgFade: true, // use fade effect
        bgOpacity: .3, // fade opacity
        allowSelect: true,
        onSelect: updateInfo
    }, function(){
        // Store the Jcrop API in the jcrop_api variable
        jcrop_api = this;

    });
}

Answer 1

Jcrop创建一个Button标签，在HTML5中，所有按钮都可以提交表单，因此通过获取其ID或类来更改此按钮的按钮类型，例如 $（“。jcrop-box”）。attr（'type'，'button'）

JCrop api＆＃39;拖动动作＆＃39;触发提交事件

1 个答案: