jquery 文件上传复选框表单
jquery file upload check box form
我是 JS 初学者,我决定使用这个库:
https://blueimp.github.io/jQuery-File-Upload/
我的问题如下:
我必须发送(在 FormData 中,因此是附加形式)2 个复选框的值。
问题是当页面加载并且客户端更改其值时复选框为假,并且在我的代码中,表单数据采用两个复选框的值但在更改期间不更新它们(选中/未选中)。
$(function() {
"use strict";
var e = $("<button/>").addClass("intimity-button-dark").prop("disabled", !0).text("Processing...").on("click", function() {
var param1 = $('#guest').is("checked");
console.log(param1);
var e = $(this),a = e.data();
e.off("click").text("Abort").on("click", function() {
e.remove(), a.abort()
}), a.submit().always(function() {
e.remove()
})
});
$("#fileupload").fileupload({
url: "/server/php/",
dataType: "json",
autoUpload: !1,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png|mov|mp4|avi)$/i,
maxFileSize: 5e6,
disableImageResize: /Android(?!.*Chrome)|Opera/.test(window.navigator.userAgent),
previewMaxWidth: 200,
previewMaxHeight: 300,
formData: {guest: $("#guest").prop('checked'), signed : $("#signed").prop('checked')},
previewCrop: !0
}).on("fileuploadadd", function(a, n) {
n.context = $("<div/>").addClass('col-xs-6 col-sm-4').appendTo("#files"), $.each(n.files, function(a, t) {
var r = $("<p/>").append($("<span/>").text(t.name));
a || r.append("<br>").append(e.clone(!0).data(n)), r.appendTo(n.context)
})
}).on("fileuploadprocessalways", function(e, a) {
var n = a.index,
t = a.files[n],
r = $(a.context.children()[n]);
t.preview && r.prepend("<br>").prepend(t.preview), t.error && r.append("<br>").append($('<span class="text-danger"/>').text(t.error)), n + 1 === a.files.length && a.context.find("button").text("Upload").prop("disabled", !!a.files.error)
}).on("fileuploadprogressall", function(e, a) {
var n = parseInt(a.loaded / a.total * 100, 10);
$("#progress .progress-bar").css("width", n + "%")
}).on("fileuploaddone", function(e, a) {
$.each(a.result.files, function(e, n) {
if (n.url) {
var t = $("<a>").attr("target", "_blank").prop("href", n.url);
$(a.context.children()[e]).wrap(t)
} else if (n.error) {
var r = $('<span class="text-danger"/>').text(n.error);
$(a.context.children()[e]).append("<br>").append(r)
}
})
}).on("fileuploadfail", function(e, a) {
$.each(a.files, function(e) {
var n = $('<span class="text-danger"/>').text("File upload failed.");
$(a.context.children()[e]).append("<br>").append(n)
})
}).prop("disabled", !$.support.fileInput).parent().addClass($.support.fileInput ? void 0 : "disabled")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Add files...</span>
<input id="fileupload" style="display:none;" type="file" name="files[]" multiple>
<input type="checkbox" id="guest" name="guest" value="1">
<input type="checkbox" id="signed" name="signed" value="1">
那么,如何让 "format" 检索当前值?
要从复选框中获取值,您应该使用这个
$('#checkbox').is(':checked')
好吧,我赢了:
var e = $ ("<button />"). addClass ("intimity-button-dark"). prop ("désactivé",! 0) .text ("Traitement ..."). on ("clic", fonction() {
$ ('# fileupload'). bind ('fileuploadsubmit', fonction (e, données) {
data.formData = {invité: $ ('# invité'). is (": checked"), signé: $ ('# signed'). is (": checked")};
console.log ($ ('# invité'). is ("vérifié") + "|" + $ ('# signed'). is ("checked"))
});
var param1 = $ ('# invité'). est ("vérifié");
console.log (param1);
var e = $ (this), a = e.data ();
e.off ("click"). text ("Abort"). on ("clic", function () {
e.remove (), a.abort ()
}), a.submit (). always (function () {
e.remove ()
})
});
$ ("# fileupload"). fileupload ({
url: "/ server / php /",
dataType: "json",
autoUpload:! 1,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png|mov|mp4|avi)$/i,
maxFileSize: 5e6,
disableImageResize: /Android(?!.*Chrome)|Opera/.test(window.navigator.userAgent),
previewMaxWidth: 200,
AperçuMaxHauteur: 300,
previewCrop:! 0
})
.bind('fileuploadsubmit' 允许我重新配置文件上传,当我单击“上传”按钮时,它会通过直接发送复选框的当前值来修改配置。
我是 JS 初学者,我决定使用这个库: https://blueimp.github.io/jQuery-File-Upload/
我的问题如下:
我必须发送(在 FormData 中,因此是附加形式)2 个复选框的值。 问题是当页面加载并且客户端更改其值时复选框为假,并且在我的代码中,表单数据采用两个复选框的值但在更改期间不更新它们(选中/未选中)。
$(function() {
"use strict";
var e = $("<button/>").addClass("intimity-button-dark").prop("disabled", !0).text("Processing...").on("click", function() {
var param1 = $('#guest').is("checked");
console.log(param1);
var e = $(this),a = e.data();
e.off("click").text("Abort").on("click", function() {
e.remove(), a.abort()
}), a.submit().always(function() {
e.remove()
})
});
$("#fileupload").fileupload({
url: "/server/php/",
dataType: "json",
autoUpload: !1,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png|mov|mp4|avi)$/i,
maxFileSize: 5e6,
disableImageResize: /Android(?!.*Chrome)|Opera/.test(window.navigator.userAgent),
previewMaxWidth: 200,
previewMaxHeight: 300,
formData: {guest: $("#guest").prop('checked'), signed : $("#signed").prop('checked')},
previewCrop: !0
}).on("fileuploadadd", function(a, n) {
n.context = $("<div/>").addClass('col-xs-6 col-sm-4').appendTo("#files"), $.each(n.files, function(a, t) {
var r = $("<p/>").append($("<span/>").text(t.name));
a || r.append("<br>").append(e.clone(!0).data(n)), r.appendTo(n.context)
})
}).on("fileuploadprocessalways", function(e, a) {
var n = a.index,
t = a.files[n],
r = $(a.context.children()[n]);
t.preview && r.prepend("<br>").prepend(t.preview), t.error && r.append("<br>").append($('<span class="text-danger"/>').text(t.error)), n + 1 === a.files.length && a.context.find("button").text("Upload").prop("disabled", !!a.files.error)
}).on("fileuploadprogressall", function(e, a) {
var n = parseInt(a.loaded / a.total * 100, 10);
$("#progress .progress-bar").css("width", n + "%")
}).on("fileuploaddone", function(e, a) {
$.each(a.result.files, function(e, n) {
if (n.url) {
var t = $("<a>").attr("target", "_blank").prop("href", n.url);
$(a.context.children()[e]).wrap(t)
} else if (n.error) {
var r = $('<span class="text-danger"/>').text(n.error);
$(a.context.children()[e]).append("<br>").append(r)
}
})
}).on("fileuploadfail", function(e, a) {
$.each(a.files, function(e) {
var n = $('<span class="text-danger"/>').text("File upload failed.");
$(a.context.children()[e]).append("<br>").append(n)
})
}).prop("disabled", !$.support.fileInput).parent().addClass($.support.fileInput ? void 0 : "disabled")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Add files...</span>
<input id="fileupload" style="display:none;" type="file" name="files[]" multiple>
<input type="checkbox" id="guest" name="guest" value="1">
<input type="checkbox" id="signed" name="signed" value="1">
那么,如何让 "format" 检索当前值?
要从复选框中获取值,您应该使用这个
$('#checkbox').is(':checked')
好吧,我赢了:
var e = $ ("<button />"). addClass ("intimity-button-dark"). prop ("désactivé",! 0) .text ("Traitement ..."). on ("clic", fonction() {
$ ('# fileupload'). bind ('fileuploadsubmit', fonction (e, données) {
data.formData = {invité: $ ('# invité'). is (": checked"), signé: $ ('# signed'). is (": checked")};
console.log ($ ('# invité'). is ("vérifié") + "|" + $ ('# signed'). is ("checked"))
});
var param1 = $ ('# invité'). est ("vérifié");
console.log (param1);
var e = $ (this), a = e.data ();
e.off ("click"). text ("Abort"). on ("clic", function () {
e.remove (), a.abort ()
}), a.submit (). always (function () {
e.remove ()
})
});
$ ("# fileupload"). fileupload ({
url: "/ server / php /",
dataType: "json",
autoUpload:! 1,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png|mov|mp4|avi)$/i,
maxFileSize: 5e6,
disableImageResize: /Android(?!.*Chrome)|Opera/.test(window.navigator.userAgent),
previewMaxWidth: 200,
AperçuMaxHauteur: 300,
previewCrop:! 0
})
.bind('fileuploadsubmit' 允许我重新配置文件上传,当我单击“上传”按钮时,它会通过直接发送复选框的当前值来修改配置。