[javascript] 將dropzone.js與其他字段集成到現有的html表單中


Answers

我有完全相同的問題,發現Varan Sinayee的答案是唯一真正解決原始問題的答案。 這個答案可以簡化,所以這裡是一個更簡單的版本。

步驟是:

  1. 創建一個常規表單(不要忘記方法和enctype參數,因為這不再由dropzone處理)。

  2. class="dropzone"放在class="dropzone" (這是Dropzone附加到它的方式)和id="yourDropzoneName" (用於更改選項)。

  3. 設置Dropzone的選項,設置表單和文件將被發布的URL,停用autoProcessQueue(所以它只發生在用戶按'提交'時)並允許多個上傳(如果你需要的話)。

  4. 當點擊提交按鈕時,將init函數設置為使用Dropzone而不是默認行為。

  5. 仍然在init函數中,使用“sendingmultiple”事件處理程序將表單數據與文件一起發送。

Voilà! 您現在可以像使用普通窗體一樣在$ _POST和$ _FILES中檢索數據(在這個例子中,這將發生在upload.php中)

HTML

<form action="upload.php" enctype="multipart/form-data" method="POST">
    <input type="text" id ="firstname" name ="firstname" />
    <input type="text" id ="lastname" name ="lastname" />
    <div class="dropzone" id="myDropzone"></div>
    <button type="submit" id="submit-all"> upload </button>
</form>

JS

Dropzone.options.myDropzone= {
    url: 'upload.php',
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 5,
    maxFiles: 5,
    maxFilesize: 1,
    acceptedFiles: 'image/*',
    addRemoveLinks: true,
    init: function() {
        dzClosure = this; // Makes sure that 'this' is understood inside the functions below.

        // for Dropzone to process the queue (instead of default form behavior):
        document.getElementById("submit-all").addEventListener("click", function(e) {
            // Make sure that the form isn't actually being sent.
            e.preventDefault();
            e.stopPropagation();
            dzClosure.processQueue();
        });

        //send all the form data along with the files:
        this.on("sendingmultiple", function(data, xhr, formData) {
            formData.append("firstname", jQuery("#firstname").val());
            formData.append("lastname", jQuery("#lastname").val());
        });
    }
}
Question

我目前有一個html表單,用戶可以填寫他們希望發布的廣告的詳細信息。 我現在希望能夠添加一個dropzone上傳待售商品的圖片。 我發現dropzone.js似乎做我需要的大部分。 但是,在查看文檔時,您似乎需要將整個表單的類指定為“dropzone”(而不僅僅是輸入元素)。 這意味著我的整個表單變成了dropzone。 是否可以在我的表單的一部分中使用dropzone,即僅將該元素指定為類dropzone而不是整個表單?

我可以使用單獨的表單,但我希望用戶能夠使用一個按鈕提交所有表單。

或者,是否有另一個庫可以做到這一點?

非常感謝




Enyo的教程非常好。

我發現本教程中的示例腳本適用於嵌入在dropzone中的按鈕(即表單元素)。 如果您希望將按鈕放在表單元素之外,我可以使用單擊事件來完成它:

首先,HTML:

<form id="my-awesome-dropzone" action="/upload" class="dropzone">  
    <div class="dropzone-previews"></div>
    <div class="fallback"> <!-- this is the fallback if JS isn't working -->
        <input name="file" type="file" multiple />
    </div>

</form>
<button type="submit" id="submit-all" class="btn btn-primary btn-xs">Upload the file</button>

然後,腳本標籤....

Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element

    // The configuration we've talked about above
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 25,
    maxFiles: 25,

    // The setting up of the dropzone
    init: function() {
        var myDropzone = this;

        // Here's the change from enyo's tutorial...

        $("#submit-all").click(function (e) {
            e.preventDefault();
            e.stopPropagation();
            myDropzone.processQueue();
        }); 
    }
}



我有一個更自動化的解決方案。

HTML:

<form role="form" enctype="multipart/form-data" action="{{ $url }}" method="{{ $method }}">
    {{ csrf_field() }}

    <!-- You can add extra form fields here -->

    <input hidden id="file" name="file"/>

    <!-- You can add extra form fields here -->

    <div class="dropzone dropzone-file-area" id="fileUpload">
        <div class="dz-default dz-message">
            <h3 class="sbold">Drop files here to upload</h3>
            <span>You can also click to open file browser</span>
        </div>
    </div>

    <!-- You can add extra form fields here -->

    <button type="submit">Submit</button>
</form>

JavaScript的:

Dropzone.options.fileUpload = {
    url: 'blackHole.php',
    addRemoveLinks: true,
    accept: function(file) {
        let fileReader = new FileReader();

        fileReader.readAsDataURL(file);
        fileReader.onloadend = function() {

            let content = fileReader.result;
            $('#file').val(content);
            file.previewElement.classList.add("dz-success");
        }
        file.previewElement.classList.add("dz-complete");
    }
}

Laravel:

// Get file content
$file = base64_decode(request('file'));

無需禁用DropZone發現,並且標準格式提交將能夠通過標準格式序列化將文件與任何其他表單字段一起發送。

該機制在處理後將文件內容作為base64字符串存儲在隱藏輸入字段中。 您可以通過標準的base64_decode()方法將其解碼為PHP中的二進製字符串。

我不知道這種方法是否會受到大文件的影響,但它適用於大約40MB的文件。




除了sqram的說法外,Dropzone還有一個額外的未公開的選項“hiddenInputContainer”。 您所要做的就是將此選項設置為希望將隱藏文件字段附加到的表單的選擇器。 瞧! Dropzone通常添加到主體中的“.dz-hidden-input”文件字段神奇地移動到您的表單中。 不改變Dropzone源代碼。

現在,雖然這可以將Dropzone文件字段移動到您的表單中,但該字段沒有名稱。 所以你需要添加:

_this.hiddenFileInput.setAttribute("name", "field_name[]");

在這一行之後dropzone.js:

_this.hiddenFileInput = document.createElement("input");

在547線附近。




Related