Rails 5：如何防止jQuery多次提交

Question

我是编码的初学者。

我正在Rails 5上开发应用程序，并允许用户使用blueimp / jQuery-File-Upload从客户端裁剪图像并将图像直接上传到AWS s3。

当用户重新选择要裁剪和上传的图像时，我遇到了问题。 重新选择会导致向Rails提交多个表单，最终创建与重新选择相同数量的帖子...

我想知道如何防止多次提交。

我的Javascript代码就是这样；

 $(function() { $('.directUpload').find("input:file").each(function(i, elem) { var fileInput = $(elem); var form = $(fileInput.parents('form:first')); var submitButton = form.find('input[type="submit"]'); var progressBar = $("<div class='bar'></div>"); var barContainer = $("<div class='progress'></div>").append(progressBar); fileInput.after(barContainer); fileInput.fileupload({ fileInput: fileInput, url: form.data('url'), type: 'POST', autoUpload: false, formData: form.data('form-data'), paramName: 'file', // S3 does not like nested name fields ie name="user[avatar_url]" dataType: 'XML', // S3 returns XML if success_action_status is set to 201 replaceFileInput: false, acceptFileTypes: /(\\.|\\/)(gif|jpe?g|png)$/i, //trying to limit the number of files, but none of them works... maxNumberOfFiles: 1, sequentialUploads: true, limitMultiFileUploads:1, limitConcurrentUploads: 1, add: function(e, data){ if (data.files && data.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $('.preview').empty(); $('.preview').append($('<img>').attr({// insert preview image src: e.target.result, id: "crop_img", title: data.files[0].name })); $('#crop_img').cropper() // initialize cropper on preview image }; reader.readAsDataURL(data.files[0]); // $('#clear').show(); }; // tried to clear the form and file input when re-selection occurs, however, it doesn't work either... // $('#clear').click(function() { // $('#image').val(''); // $('.preview').empty(); // $('form').reset(); // $(this).hide(); // }); submitButton.on('click', function(){ $('form').submit(function(){ return false; }); $('#crop_img').cropper('getCroppedCanvas').toBlob(function (blob){ data.files[0] = new File([blob], data.files[0].name); data.originalFiles[0] = data.files[0]; data.submit(); }) }); }, ... done: function(e, data) { // extract key and generate URL from response var key = $(data.jqXHR.responseXML).find("Key").text(); var url = '//' + form.data('host') + '/' + key; // create hidden field var input = $("<input />", { type:'hidden', name: fileInput.attr('name'), value: url }) form.append(input); //delete submit event which is false $('form').off('submit'); //and submit again $('.directUpload').submit(); } ... }); }); }); 

Answer 1

我认为这是因为每次调用add都会调用以下代码：

submitButton.on('click', function(){
  $('form').submit(function(){
    return false;
    });
   $('#crop_img').cropper('getCroppedCanvas').toBlob(function (blob){
      data.files[0] = new File([blob], data.files[0].name);
      data.originalFiles[0] = data.files[0];
      data.submit();
    })
 });

我不确定您的代码如何工作。 因此，一种解决方案是将代码更新为此：

// outside add function:
var lastData = null;

submitButton.on('click', function(){
  $('form').submit(function(){
    return false;
    });
   $('#crop_img').cropper('getCroppedCanvas').toBlob(function (blob){
      lastData.files[0] = new File([blob], data.files[0].name);
      lastData.originalFiles[0] = lastData.files[0];
      lastData.submit();
    })
 });

 // In add function
 lastData = data;

PS：lastData就像一个快速的解决方法，但是我认为它不能正常工作。

 $(function() { $('.directUpload').find("input:file").each(function(i, elem) { var fileInput = $(elem); var form = $(fileInput.parents('form:first')); var submitButton = form.find('input[type="submit"]'); var progressBar = $("<div class='bar'></div>"); var barContainer = $("<div class='progress'></div>").append(progressBar); var lastData = null; submitButton.on('click', function(){ $('form').submit(function(){ return false; }); $('#crop_img').cropper('getCroppedCanvas').toBlob(function (blob){ lastData.files[0] = new File([blob], data.files[0].name); lastData.originalFiles[0] = lastData.files[0]; lastData.submit(); }) }); fileInput.after(barContainer); fileInput.fileupload({ fileInput: fileInput, url: form.data('url'), type: 'POST', autoUpload: false, formData: form.data('form-data'), paramName: 'file', // S3 does not like nested name fields ie name="user[avatar_url]" dataType: 'XML', // S3 returns XML if success_action_status is set to 201 replaceFileInput: false, acceptFileTypes: /(\\.|\\/)(gif|jpe?g|png)$/i, //trying to limit the number of files, but none of them works... maxNumberOfFiles: 1, sequentialUploads: true, limitMultiFileUploads:1, limitConcurrentUploads: 1, add: function(e, data){ if (data.files && data.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $('.preview').empty(); $('.preview').append($('<img>').attr({// insert preview image src: e.target.result, id: "crop_img", title: data.files[0].name })); $('#crop_img').cropper() // initialize cropper on preview image }; reader.readAsDataURL(data.files[0]); // $('#clear').show(); }; // tried to clear the form and file input when re-selection occurs, however, it doesn't work either... // $('#clear').click(function() { // $('#image').val(''); // $('.preview').empty(); // $('form').reset(); // $(this).hide(); // }); lastData = data; }, ... done: function(e, data) { // extract key and generate URL from response var key = $(data.jqXHR.responseXML).find("Key").text(); var url = '//' + form.data('host') + '/' + key; // create hidden field var input = $("<input />", { type:'hidden', name: fileInput.attr('name'), value: url }) form.append(input); //delete submit event which is false $('form').off('submit'); //and submit again $('.directUpload').submit(); } ... }); }); });