JCrop api'dragging-action'觸發器提交事件

在表單中使用JCrop api時，釋放拖動動作時會觸發提交事件。我無法弄清楚是什麼導致了提交事件。這是由JCrop api引起的，是否有辦法阻止表單提交？JCrop api'dragging-action'觸發器提交事件

的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; 

    }); 
}

來源

2015-08-21 Stein

Jcrop創建一個按鈕標籤和HTML5中所有的按鈕可以提交表單，所以通過採取改變這個按鍵的按鍵式的id或class例如 $（「。jcrop-box」）。attr（'type'，'button'）

來源

2015-09-08 14:20:53

謝謝！這工作 – Stein

JCrop api'dragging-action'觸發器提交事件

回答

相關問題