javascript value取得 - 將dropzone.js與其他字段集成到現有的html表單中





dropzone中文 input (9)


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

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的文件。

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

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

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

非常感謝




您可以通過捕獲您的dropzone中的“發送”事件來修改formData。

dropZone.on('sending', function(data, xhr, formData){
        formData.append('fieldname', 'value');
});



為了在單個請求中將所有文件與其他表單數據一起提交,您可以將Dropzone.js臨時隱藏input節點複製到表單中。 您可以在addedfiles事件處理程序中執行此addedfiles

var myDropzone = new Dropzone("myDivSelector", { url: "#", autoProcessQueue: false });
myDropzone.on("addedfiles", () => {
  // Input node with selected files. It will be removed from document shortly in order to
  // give user ability to choose another set of files.
  var usedInput = myDropzone.hiddenFileInput;
  // Append it to form after stack become empty, because if you append it earlier
  // it will be removed from its parent node by Dropzone.js.
  setTimeout(() => {
    // myForm - is form node that you want to submit.
    myForm.appendChild(usedInput);
    // Set some unique name in order to submit data.
    usedInput.name = "foo";
  }, 0);
});

顯然,這是一個解決方法,取決於實現細節。 相關的源代碼




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



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

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

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

在這一行之後dropzone.js:

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

在547線附近。




“dropzone.js”是上傳圖片最常用的庫。 如果您希望將“dropzone.js”作為表單的一部分,則應該執行以下步驟:

1)為客戶端:

HTML:

    <form action="/" enctype="multipart/form-data" method="POST">
        <input type="text" id ="Username" name ="Username" />
        <div class="dropzone" id="my-dropzone" name="mainFileUploader">
            <div class="fallback">
                <input name="file" type="file" multiple />
            </div>
        </div>
    </form>
    <div>
        <button type="submit" id="submit-all"> upload </button>
    </div>

JQuery的:

    <script>
        Dropzone.options.myDropzone = {
            url: "/Account/Create",
            autoProcessQueue: false,
            uploadMultiple: true,
            parallelUploads: 100,
            maxFiles: 100,
            acceptedFiles: "image/*",

            init: function () {

                var submitButton = document.querySelector("#submit-all");
                var wrapperThis = this;

                submitButton.addEventListener("click", function () {
                    wrapperThis.processQueue();
                });

                this.on("addedfile", function (file) {

                    // Create the remove button
                    var removeButton = Dropzone.createElement("<button class='btn btn-lg dark'>Remove File</button>");

                    // Listen to the click event
                    removeButton.addEventListener("click", function (e) {
                        // Make sure the button click doesn't submit the form:
                        e.preventDefault();
                        e.stopPropagation();

                        // Remove the file preview.
                        wrapperThis.removeFile(file);
                        // If you want to the delete the file on the server as well,
                        // you can do the AJAX request here.
                    });

                    // Add the button to the file preview element.
                    file.previewElement.appendChild(removeButton);
                });

                this.on('sendingmultiple', function (data, xhr, formData) {
                    formData.append("Username", $("#Username").val());
                });
            }
        };
    </script>

2)服務器端:

ASP.Net MVC

    [HttpPost]
    public ActionResult Create()
    {
        var postedUsername = Request.Form["Username"].ToString();
        foreach (var imageFile in Request.Files)
        {

        }

        return Json(new { status = true, Message = "Account created." });
    }



下面是另一種方法:在窗體中添加一個帶有classname dropzone的div ,並以編程方式實現dropzone。

HTML:

<div id="dZUpload" class="dropzone">
      <div class="dz-default dz-message"></div>
</div>

JQuery的:

$(document).ready(function () {
    Dropzone.autoDiscover = false;
    $("#dZUpload").dropzone({
        url: "hn_SimpeFileUploader.ashx",
        addRemoveLinks: true,
        success: function (file, response) {
            var imgName = response;
            file.previewElement.classList.add("dz-success");
            console.log("Successfully uploaded :" + imgName);
        },
        error: function (file, response) {
            file.previewElement.classList.add("dz-error");
        }
    });
});

注意:禁用autoDiscover,否則Dropzone會嘗試附加兩次

博客文章Dropzone js + Asp.net:輕鬆上傳批量圖像的方法




這是您如何在現有表單中使用Dropzone.js的另一個例子。

dropzone.js:

 init: function() {

   this.on("success", function(file, responseText) {
     //alert("HELLO ?" + responseText); 
     mylittlefix(responseText);
   });

   return noop;
 },

然後,在我放入的文件中

function mylittlefix(responseText) {
  $('#botofform').append('<input type="hidden" name="files[]" value="'+ responseText +'">');
}

這假定你有一個ID為#botofform的div,在上傳時你可以使用上傳的文件名。

注意:我的上傳腳本返回了uploadedfilename.jpeg dubblenote,您還需要創建一個清理腳本,用於檢查上傳目錄中未使用的文件,並刪除它們。如果未經過驗證的前端形式:)




返回b返回一個函數對象。 在Javascript中,函數只是對象,就像任何其他對像一樣。 如果您發現沒有幫助,只需將“object”一詞替換為“thing”即可。 您可以從函數返回任何對象。 你可以返回一個真/假的值。 一個整數(1,2,3,4 ...)。 您可以返回一個字符串。 您可以返回具有多個屬性的複雜對象。 你可以返回一個函數。 功能只是一件事。

在你的情況下,返回b返回的東西,東西是一個可調用函數。 返回b()返回可調用函數返回的值。

考慮這個代碼:

function b() {
   return 42;
}

使用上面的定義, return b(); 返回值42.另一方面return b; 返回一個函數,它本身返回值42.它們是兩個不同的東西。





javascript jquery html file-upload dropzone.js