好的,这是场景。我已经有一个包含一些输入字段,一些单选按钮和一个input type=file
的表单。有一个按钮用于使用AJAX提交整个表单。
一切都运转良好,直到我决定用更精美的DropZone.js更改<form enctype="multipart/form-data" id="test_form" name="test_form" class="form uniformForm">
<input class="form-control" type="text" value="" name="a-name" id="a-name" />
<label for="a-name">Field Name</label>
<div class="dropzone dropzone-previews" id="my-awesome-dropzone </div>
</form>
<button class="btn btn-primary btn-large" id="submitForm"> Submit </button>
现在我有以下HTML代码(这里有一个示例):
$("button#submitForm").click(function(){
var fd = new FormData(document.getElementById("test_form"));
fd.append("label", "WEBUPLOAD");
$.ajax({
type: "POST",
url: "create_form.php",
data: fd,
enctype: 'multipart/form-data',
processData: false, // tell jQuery not to process the data
contentType: false, // tell jQuery not to set contentType
});
});
$("div#my-awesome-dropzone").dropzone({
url: "#",
paramName: "creative_file",
maxFilesize: 1,
autoProcessQueue: false
});
我也有以下js(jQuery):
<input type="file" name="file" />
在Dropzone.js的文档中,dropzone div看起来像ng-model
。唯一的区别是我想将输入名称重命名为creative_file。
我有2个问题。
1)这不起作用。当按下提交按钮时,我打开了FIREBUG,然后检查它作为POST发送的内容。它发送除文件之外的所有内容。没有creative_file,根本没有文件。
2)如果最终弄清楚如何使它有效,有没有办法让这种实现具有后备功能,特别是对于iOS或Android设备?
答案 0 :(得分:0)
1)
$("#salvar").on('click',function(e) {
if ($("#psl_titulo").val() == "") {
alert('Empty');
} else {
e.preventDefault();
if (myDropzone.getQueuedFiles().length > 0) {
myDropzone.processQueue();
} else {
$("#my-awesome-dropzone").submit(function(e)
{
var postData = $(this).serializeArray();
var formURL = $(this).attr("action");
$.ajax(
{
url : formURL,
type: "POST",
data : postData,
success:function(data, textStatus, jqXHR)
{
window.location.href = url_redirect;
},
error: function(jqXHR, textStatus, errorThrown)
{
alert('Ocorreu um erro ao salvar ao enviar os dados. Erro: ' + textStatus);
}
});
e.preventDefault();
});
$("#my-awesome-dropzone").submit();
}
}
});