可湿性粉剂 / Ajax | Jquery Dropzone js文件上传调用两次请求
WP / Ajax | Jquery Dropzone js file Upload Calling twice Request
我在服务器端使用 Jquery Dropzone js 进行文件上传 PHP / WordPress,我在这里也看到了同样的问题 我尝试了很多方法,但它仍然调用两次文件上传请求.如果您发现我的 dropzone 设置有任何错误,请帮忙。
我也使用此 link 中的设置: 但仍然相同。
jQuery(document).ready(function(jQuery){
"use strict";
jQuery.noConflict();
if(jQuery('div').is('#fvr_dropzone')){
Dropzone.autoDiscover = false;
}
if(jQuery('div').is('#fvr_dropzone')){
var fvrDropZone = jQuery("#fvr_dropzone");
var maxfile = fvrDropZone .data("max-file");
var maxsize = fvrDropZone .data("max-size");
var filemsg = jQuery(".dz-max-file-msg");
var removemsg = jQuery(".dz-remove").html();
var ourIDS = '';
fvrDropZone .dropzone ({
url: options.ajaxurl,
acceptedFiles: "image/*",
maxFiles: maxfile,
parallelUploads: 10,
uploadMultiple: true,
addRemoveLinks: true,
maxFilesize: maxsize,
dictRemoveFile: removemsg,
autoProcessQueue: false,
autoDiscover: false,
init: function() {
this.on("error", function(file, response) {
jQuery('.dropzoneAlert').html(response);
jQuery('.dz-max-file-msg').show();
this.removeFile(file);
allfile_uploaded = true;
});
this.on("sending", function(file, xhr, formData) {
allfile_uploaded = false;
formData.append("action", "fvr_media_upload");
});
this.on("success", function(file, response) {
if (response.error === false) {
jQuery(file.previewElement).append('<input name="attachedids[]" type="hidden" value="'+ response.attachedID +'">');
jQuery(file.previewElement).attr("id", response.attachedID);
}else {
alert(response.msg);
this.removeFile(file);
}
});
this.on("complete", function(file, response) {
jQuery('#fvr_dropzone').sortable();
allfile_uploaded = true;
submit_myform ();
});
this.on("removedfile", function(file) {
var attachedID = jQuery(file.previewElement).attr("id");
var attachedData = {
'action': 'fvr_media_upload',
'delete_attached': attachedID
};
jQuery.ajax({
type : 'POST',
dataType : 'json',
url : options.ajaxurl,
data : attachedData,
});
});
},
});
}});
我的表单、我的放置区、我的按钮都在这里
<form class="form-horizontal" action="" role="form" id="primaryPostForm" method="POST" data-toggle="validator" enctype="multipart/form-data">
<!--dropzone-->
<div class="dropzone dz-clickable mb-4" id="fvr_dropzone" data-max-file="<?php echo esc_attr($imageLimit ); ?>">
<div class="dz-default dz-message" data-dz-message="">
<p class="text-center"><i class="far fa-images fa-3x"></i></p>
<span><?php esc_html_e( 'Drop files here to upload', 'fvr' ); ?></span>
<span><?php esc_html_e( 'or', 'fvr' ); ?></span>
<strong>
<?php esc_html_e( 'Click here', 'fvr' ); ?>
</strong>
<span><?php esc_html_e( 'to select images', 'fvr' ); ?></span>
<p class="text-muted">(<?php esc_html_e( 'Your first image will be used as a featured image, and it will be shown as thumbnail.', 'fvr' ); ?>)</p>
</div>
<div class="dz-max-file-msg">
<div class="alert alert-danger text-center">
<?php esc_html_e('You can upload', 'fvr') ?> <?php echo esc_attr( $imageLimit ); ?> <?php esc_html_e('images maximum.', 'fvr') ?>
</div>
</div>
<div class="dz-remove" data-dz-remove>
<span><?php esc_html_e('Remove', 'fvr') ?></span>
</div>
</div>
这就是我用 js 调用 .processQueue() 函数的方式。
<script type="text/javascript">
//Check if all files uploaded
var allfile_uploaded = false;
function SubmitDonationForm (ev) {
// Upload photos first
var myDropzone = Dropzone.forElement("#fvr_dropzone");
myDropzone.processQueue();
}
function submit_myform () {
if (allfile_uploaded) {
jQuery('form#primaryPostForm').submit();
}else {
alert("Please wait while file uploading...")
}
}
jQuery(document).ready(function(jQuery){
"use strict";
jQuery.noConflict();
if(jQuery('div').is('#fvr_dropzone')){
Dropzone.autoDiscover = false;
}
if(jQuery('div').is('#fvr_dropzone')){
var fvrDropZone = jQuery("#fvr_dropzone");
var maxfile = fvrDropZone .data("max-file");
var maxsize = fvrDropZone .data("max-size");
var filemsg = jQuery(".dz-max-file-msg");
var removemsg = jQuery(".dz-remove").html();
var ourIDS = '';
fvrDropZone .dropzone ({
url: options.ajaxurl,
acceptedFiles: "image/*",
maxFiles: maxfile,
parallelUploads: 10,
uploadMultiple: true,
addRemoveLinks: true,
maxFilesize: maxsize,
dictRemoveFile: removemsg,
autoProcessQueue: false,
autoDiscover: false,
init: function() {
this.on("error", function(file, response) {
jQuery('.dropzoneAlert').html(response);
jQuery('.dz-max-file-msg').show();
this.removeFile(file);
allfile_uploaded = true;
});
this.on("sending", function(file, xhr, formData) {
allfile_uploaded = false;
formData.append("action", "fvr_media_upload");
});
this.on("success", function(file, response) {
if (response.error === false) {
jQuery(file.previewElement).append('<input name="attachedids[]" type="hidden" value="'+ response.attachedID +'">');
jQuery(file.previewElement).attr("id", response.attachedID);
}else {
alert(response.msg);
this.removeFile(file);
}
});
this.on("complete", function(file, response) {
jQuery('#fvr_dropzone').sortable();
allfile_uploaded = true;
// submit_myform();
});
this.on("removedfile", function(file) {
var attachedID = jQuery(file.previewElement).attr("id");
var attachedData = {
'action': 'fvr_media_upload',
'delete_attached': attachedID
};
jQuery.ajax({
type : 'POST',
dataType : 'json',
url : options.ajaxurl,
data : attachedData,
});
});
},
});
}});
我在服务器端使用 Jquery Dropzone js 进行文件上传 PHP / WordPress,我在这里也看到了同样的问题 我尝试了很多方法,但它仍然调用两次文件上传请求.如果您发现我的 dropzone 设置有任何错误,请帮忙。
我也使用此 link 中的设置:
jQuery(document).ready(function(jQuery){
"use strict";
jQuery.noConflict();
if(jQuery('div').is('#fvr_dropzone')){
Dropzone.autoDiscover = false;
}
if(jQuery('div').is('#fvr_dropzone')){
var fvrDropZone = jQuery("#fvr_dropzone");
var maxfile = fvrDropZone .data("max-file");
var maxsize = fvrDropZone .data("max-size");
var filemsg = jQuery(".dz-max-file-msg");
var removemsg = jQuery(".dz-remove").html();
var ourIDS = '';
fvrDropZone .dropzone ({
url: options.ajaxurl,
acceptedFiles: "image/*",
maxFiles: maxfile,
parallelUploads: 10,
uploadMultiple: true,
addRemoveLinks: true,
maxFilesize: maxsize,
dictRemoveFile: removemsg,
autoProcessQueue: false,
autoDiscover: false,
init: function() {
this.on("error", function(file, response) {
jQuery('.dropzoneAlert').html(response);
jQuery('.dz-max-file-msg').show();
this.removeFile(file);
allfile_uploaded = true;
});
this.on("sending", function(file, xhr, formData) {
allfile_uploaded = false;
formData.append("action", "fvr_media_upload");
});
this.on("success", function(file, response) {
if (response.error === false) {
jQuery(file.previewElement).append('<input name="attachedids[]" type="hidden" value="'+ response.attachedID +'">');
jQuery(file.previewElement).attr("id", response.attachedID);
}else {
alert(response.msg);
this.removeFile(file);
}
});
this.on("complete", function(file, response) {
jQuery('#fvr_dropzone').sortable();
allfile_uploaded = true;
submit_myform ();
});
this.on("removedfile", function(file) {
var attachedID = jQuery(file.previewElement).attr("id");
var attachedData = {
'action': 'fvr_media_upload',
'delete_attached': attachedID
};
jQuery.ajax({
type : 'POST',
dataType : 'json',
url : options.ajaxurl,
data : attachedData,
});
});
},
});
}});
我的表单、我的放置区、我的按钮都在这里
<form class="form-horizontal" action="" role="form" id="primaryPostForm" method="POST" data-toggle="validator" enctype="multipart/form-data">
<!--dropzone-->
<div class="dropzone dz-clickable mb-4" id="fvr_dropzone" data-max-file="<?php echo esc_attr($imageLimit ); ?>">
<div class="dz-default dz-message" data-dz-message="">
<p class="text-center"><i class="far fa-images fa-3x"></i></p>
<span><?php esc_html_e( 'Drop files here to upload', 'fvr' ); ?></span>
<span><?php esc_html_e( 'or', 'fvr' ); ?></span>
<strong>
<?php esc_html_e( 'Click here', 'fvr' ); ?>
</strong>
<span><?php esc_html_e( 'to select images', 'fvr' ); ?></span>
<p class="text-muted">(<?php esc_html_e( 'Your first image will be used as a featured image, and it will be shown as thumbnail.', 'fvr' ); ?>)</p>
</div>
<div class="dz-max-file-msg">
<div class="alert alert-danger text-center">
<?php esc_html_e('You can upload', 'fvr') ?> <?php echo esc_attr( $imageLimit ); ?> <?php esc_html_e('images maximum.', 'fvr') ?>
</div>
</div>
<div class="dz-remove" data-dz-remove>
<span><?php esc_html_e('Remove', 'fvr') ?></span>
</div>
</div>
这就是我用 js 调用 .processQueue() 函数的方式。
<script type="text/javascript">
//Check if all files uploaded
var allfile_uploaded = false;
function SubmitDonationForm (ev) {
// Upload photos first
var myDropzone = Dropzone.forElement("#fvr_dropzone");
myDropzone.processQueue();
}
function submit_myform () {
if (allfile_uploaded) {
jQuery('form#primaryPostForm').submit();
}else {
alert("Please wait while file uploading...")
}
}
jQuery(document).ready(function(jQuery){
"use strict";
jQuery.noConflict();
if(jQuery('div').is('#fvr_dropzone')){
Dropzone.autoDiscover = false;
}
if(jQuery('div').is('#fvr_dropzone')){
var fvrDropZone = jQuery("#fvr_dropzone");
var maxfile = fvrDropZone .data("max-file");
var maxsize = fvrDropZone .data("max-size");
var filemsg = jQuery(".dz-max-file-msg");
var removemsg = jQuery(".dz-remove").html();
var ourIDS = '';
fvrDropZone .dropzone ({
url: options.ajaxurl,
acceptedFiles: "image/*",
maxFiles: maxfile,
parallelUploads: 10,
uploadMultiple: true,
addRemoveLinks: true,
maxFilesize: maxsize,
dictRemoveFile: removemsg,
autoProcessQueue: false,
autoDiscover: false,
init: function() {
this.on("error", function(file, response) {
jQuery('.dropzoneAlert').html(response);
jQuery('.dz-max-file-msg').show();
this.removeFile(file);
allfile_uploaded = true;
});
this.on("sending", function(file, xhr, formData) {
allfile_uploaded = false;
formData.append("action", "fvr_media_upload");
});
this.on("success", function(file, response) {
if (response.error === false) {
jQuery(file.previewElement).append('<input name="attachedids[]" type="hidden" value="'+ response.attachedID +'">');
jQuery(file.previewElement).attr("id", response.attachedID);
}else {
alert(response.msg);
this.removeFile(file);
}
});
this.on("complete", function(file, response) {
jQuery('#fvr_dropzone').sortable();
allfile_uploaded = true;
// submit_myform();
});
this.on("removedfile", function(file) {
var attachedID = jQuery(file.previewElement).attr("id");
var attachedData = {
'action': 'fvr_media_upload',
'delete_attached': attachedID
};
jQuery.ajax({
type : 'POST',
dataType : 'json',
url : options.ajaxurl,
data : attachedData,
});
});
},
});
}});