那么在AJAX提交的现有表单中Dropzone.js怎么样?

时间:2015-07-20 14:59:34

标签: javascript ajax forms dropzone.js

好的,这是场景。我已经有一个包含一些输入字段,一些单选按钮和一个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设备?

1 个答案:

答案 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();
                }
            }           
        });