การรวม Dropzone.js เข้ากับฟอร์ม HTML ที่มีอยู่กับฟิลด์อื่น

ขณะนี้ฉันมีรูปแบบ HTML ซึ่งผู้ใช้กรอกรายละเอียดของโฆษณาที่พวกเขาต้องการโพสต์ ตอนนี้ฉันต้องการที่จะเพิ่มdropzoneสำหรับการอัปโหลดภาพของรายการที่จะขาย

ฉันพบDropzone.jsซึ่งดูเหมือนจะทำสิ่งที่ฉันต้องการมากที่สุด อย่างไรก็ตามเมื่อดูในเอกสารดูเหมือนว่าคุณจะต้องระบุคลาสของแบบฟอร์มทั้งหมดเป็นdropzone(ตรงข้ามกับองค์ประกอบอินพุตเท่านั้น) นี้ก็หมายความว่ารูปแบบทั้งหมดของฉันกลายเป็นDropzone

เป็นไปได้หรือไม่ที่จะใช้ dropzone ในส่วนของแบบฟอร์มของฉันเช่นโดยการระบุองค์ประกอบเป็น class "dropzone"แทนที่จะเป็นแบบฟอร์มทั้งหมดหรือไม่

ฉันสามารถใช้แบบฟอร์มแยกกัน แต่ฉันต้องการให้ผู้ใช้สามารถส่งได้ทั้งหมดด้วยปุ่มเดียว

หรือมีห้องสมุดอื่นที่สามารถทำสิ่งนี้ได้หรือไม่

ขอบคุณมาก

นี่เป็นอีกวิธีในการทำ: เพิ่มdivฟอร์มของคุณด้วย classname dropzone และใช้ 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");
        }
    });
});

หมายเหตุ: ปิดใช้งานการค้นพบอัตโนมัติมิฉะนั้น Dropzone จะพยายามแนบสองครั้ง

บทความบล็อก : Dropzone js + Asp.net: วิธีง่ายๆในการอัปโหลดภาพจำนวนมาก

ฉันมีปัญหาเดียวกันที่แน่นอนและพบว่าคำตอบของ Varan Sinayee เป็นคำตอบเดียวที่แก้ไขคำถามเดิมได้ คำตอบนั้นสามารถทำให้เข้าใจได้ง่ายขึ้นดังนั้นนี่เป็นเวอร์ชั่นที่ง่ายกว่า

ขั้นตอนคือ:

1. สร้างรูปแบบปกติ (อย่าลืมวิธีการและ enctype args เนื่องจากไม่ได้จัดการโดย dropzone อีกต่อไป)

2. วาง div ข้างในด้วยclass="dropzone"(เป็นวิธีที่ Dropzone แนบกับมัน) และid="yourDropzoneName"(ใช้เพื่อเปลี่ยนตัวเลือก)

3. ตั้งค่าตัวเลือกของ Dropzone เพื่อตั้งค่า URL ที่จะโพสต์รูปแบบและไฟล์ปิดการใช้งาน autoProcessQueue (ดังนั้นจะเกิดขึ้นเฉพาะเมื่อผู้ใช้กด 'ส่ง') และอนุญาตให้อัพโหลดหลายครั้ง (ถ้าคุณต้องการ)

4. ตั้งค่าฟังก์ชั่นเริ่มต้นให้ใช้ Dropzone แทนพฤติกรรมเริ่มต้นเมื่อคลิกปุ่มส่ง

5. ยังอยู่ในฟังก์ชั่น init ใช้ตัวจัดการเหตุการณ์ "sendmultiple" เพื่อส่งข้อมูลแบบฟอร์มไปพร้อมกับไฟล์

วันนี้! ตอนนี้คุณสามารถดึงข้อมูลเช่นเดียวกับที่คุณใช้กับแบบฟอร์มปกติใน $ _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());
        });
    }
}

"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." });
    }

การสอนของ 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" สิ่งที่คุณต้องทำคือตั้งค่าตัวเลือกนี้เป็นตัวเลือกของแบบฟอร์มที่คุณต้องการให้ผนวกฟิลด์ไฟล์ที่ซ่อนอยู่ และ voila! ฟิลด์ไฟล์ ".dz-hidden-input" ที่ Dropzone ปกติจะเพิ่มให้กับร่างกายจะย้ายไปยังรูปแบบของคุณอย่างน่าอัศจรรย์ ไม่มีการแก้ไขซอร์สโค้ดของ Dropzone

ขณะนี้สิ่งนี้ใช้งานได้เพื่อย้ายเขตข้อมูลไฟล์ Dropzone ลงในแบบฟอร์มของคุณเขตข้อมูลนั้นไม่มีชื่อ ดังนั้นคุณจะต้องเพิ่ม:

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

เพื่อ dropzone.js หลังจากบรรทัดนี้:

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

รอบเส้น 547

ฉันมีทางออกอัตโนมัติเพิ่มเติมสำหรับสิ่งนี้

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 Discovery และการส่งแบบฟอร์มปกติจะสามารถส่งไฟล์พร้อมกับฟิลด์แบบฟอร์มอื่น ๆ ผ่านการทำให้เป็นอนุกรมแบบมาตรฐาน

กลไกนี้จัดเก็บเนื้อหาไฟล์เป็นสตริง base64 ในฟิลด์อินพุตที่ซ่อนอยู่เมื่อได้รับการประมวลผล คุณสามารถถอดรหัสมันกลับไปเป็นสตริงไบนารีใน PHP ได้ด้วยbase64_decode()วิธีมาตรฐาน

ฉันไม่ทราบว่าวิธีนี้จะถูกโจมตีด้วยไฟล์ขนาดใหญ่หรือไม่ แต่สามารถใช้งานได้กับไฟล์ ~ 40MB

คุณสามารถปรับเปลี่ยน formData โดยการจับ 'ส่ง' เหตุการณ์จาก dropzone ของคุณ

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

เพื่อส่งไฟล์ทั้งหมดพร้อมกับข้อมูลแบบฟอร์มอื่นในคำขอเดียวคุณสามารถคัดลอกinputโหนดซ่อนชั่วคราว Dropzone.js ลงในแบบฟอร์มของคุณ คุณสามารถทำได้ภายใน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);
});

ก่อนหน้านี้เป็นวิธีแก้ปัญหาขึ้นอยู่กับรายละเอียดการใช้งาน รหัสที่มาเกี่ยวข้อง

ฉันต้องการมีส่วนร่วมในการตอบคำถามที่นี่เช่นกันเมื่อฉันเผชิญกับปัญหาเดียวกัน - เราต้องการให้องค์ประกอบ $ _FILES พร้อมใช้งานเป็นส่วนหนึ่งของโพสต์เดียวกันเป็นแบบฟอร์มอื่น คำตอบของฉันขึ้นอยู่กับ @mrtnmgs อย่างไรก็ตามบันทึกความคิดเห็นที่เพิ่มลงในคำถามนั้น

ประการแรก: Dropzone โพสต์ข้อมูลผ่าน ajax

เพียงเพราะคุณใช้formData.appendตัวเลือกยังหมายความว่าคุณต้องจัดการกับการกระทำของ UX - นั่นคือทั้งหมดนี้เกิดขึ้นหลังฉากและไม่ใช่โพสต์รูปแบบทั่วไป ข้อมูลถูกโพสต์ไปยังurlพารามิเตอร์ของคุณ

ประการที่สอง: หากคุณต้องการเลียนแบบโพสต์คุณจะต้องเก็บข้อมูลที่โพสต์ไว้

สิ่งนี้ต้องใช้รหัสฝั่งเซิร์ฟเวอร์ในการจัดเก็บของคุณ$_POSTหรือ$_FILESในเซสชันที่ผู้ใช้สามารถโหลดหน้าอื่นได้เนื่องจากผู้ใช้จะไม่ไปที่หน้าที่ได้รับข้อมูลที่โพสต์

ประการที่สาม: คุณต้องเปลี่ยนเส้นทางผู้ใช้ไปยังหน้าที่มีการใช้ข้อมูลนี้

ตอนนี้คุณได้โพสต์ข้อมูลของคุณเก็บไว้ในเซสชั่นคุณจะต้องแสดง / การกระทำสำหรับผู้ใช้ในหน้าเพิ่มเติม คุณต้องส่งผู้ใช้ไปยังหน้านั้นด้วย

ดังนั้นสำหรับตัวอย่างของฉัน:

[รหัส Dropzone: ใช้ Jquery]

$('#dropArea').dropzone({
    url:        base_url+'admin/saveProject',
    maxFiles:   1,
    uploadMultiple: false,
    autoProcessQueue:false,
    addRemoveLinks: true,
    init:       function(){
        dzClosure = this;

        $('#projectActionBtn').on('click',function(e) {
            dzClosure.processQueue(); /* My button isn't a submit */
        });

        // My project only has 1 file hence not sendingmultiple
        dzClosure.on('sending', function(data, xhr, formData) {
            $('#add_user input[type="text"],#add_user textarea').each(function(){
                formData.append($(this).attr('name'),$(this).val());
            })
        });

        dzClosure.on('complete',function(){
            window.location.href = base_url+'admin/saveProject';
        })
    },
});

นี่เป็นอีกตัวอย่างของวิธีที่คุณสามารถใช้ 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 +'">');
}

สิ่งนี้จะถือว่าคุณมี div ที่มี id #botofformในการอัปโหลดคุณสามารถใช้ชื่อไฟล์ที่อัปโหลด

หมายเหตุ: สคริปต์อัปโหลดของฉันส่งคืน theuploadedfilename.jpeg dubblenote คุณจะต้องสร้างสคริปต์การล้างข้อมูลที่ตรวจสอบไดเรกทอรีอัปโหลดสำหรับไฟล์ที่ไม่ได้ใช้งานและลบออก .. หากอยู่ในรูปแบบที่ไม่ผ่านการตรวจสอบสิทธิ์ท้าย :)

นี่คือตัวอย่างของฉันขึ้นอยู่กับ Django + Dropzone มุมมองได้เลือก (จำเป็น) และส่ง

<form action="/share/upload/" class="dropzone" id="uploadDropzone">
    {% csrf_token %}
        <select id="warehouse" required>
            <option value="">Select a warehouse</option>
                {% for warehouse in warehouses %}
                    <option value={{forloop.counter0}}>{{warehouse.warehousename}}</option>
                {% endfor %}
        </select>
    <button id="submit-upload btn" type="submit">upload</button>
</form>

<script src="{% static '/js/libs/dropzone/dropzone.js' %}"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script>
    var filename = "";

    Dropzone.options.uploadDropzone = {
        paramName: "file",  // The name that will be used to transfer the file,
        maxFilesize: 250,   // MB
        autoProcessQueue: false,
        accept: function(file, done) {
            console.log(file.name);
            filename = file.name;
            done();    // !Very important
        },
        init: function() {
            var myDropzone = this,
            submitButton = document.querySelector("[type=submit]");

            submitButton.addEventListener('click', function(e) {
                var isValid = document.querySelector('#warehouse').reportValidity();
                e.preventDefault();
                e.stopPropagation();
                if (isValid)
                    myDropzone.processQueue();
            });

            this.on('sendingmultiple', function(data, xhr, formData) {
                formData.append("warehouse", jQuery("#warehouse option:selected").val());
            });
        }
    };
</script>