अन्य क्षेत्रों के साथ मौजूदा HTML रूप में Dropzone.js को एकीकृत करना

Question

वर्तमान में मेरे पास एक HTML फॉर्म है जिसे उपयोगकर्ता अपने द्वारा पोस्ट किए जाने वाले विज्ञापन के विवरण में भरते हैं। अब मैं बिक्री के लिए आइटम की छवियों को अपलोड करने के लिए एक ड्रॉपज़ोन जोड़ने में सक्षम होना चाहता हूं ।

मैंने Dropzone.js पाया है जो मुझे सबसे ज्यादा जरूरत है। हालाँकि, जब दस्तावेज़ीकरण को देखते हैं, तो ऐसा प्रतीत होता है कि आपको पूरे फॉर्म के वर्ग को dropzone(केवल इनपुट तत्व के विपरीत ) निर्दिष्ट करने की आवश्यकता है । इसका मतलब यह है कि मेरा पूरा रूप ड्रॉपज़ोन बन गया है ।

क्या संपूर्ण रूप के बजाय केवल कक्षा "ड्रॉपज़ोन" के रूप में तत्व को निर्दिष्ट करके , मेरे फार्म के केवल हिस्से में ड्रॉपज़ोन का उपयोग करना संभव है ?

मैं अलग-अलग रूपों का उपयोग कर सकता हूं, लेकिन मैं चाहता हूं कि उपयोगकर्ता इसे एक बटन के साथ प्रस्तुत कर सके।

वैकल्पिक रूप से, क्या कोई अन्य पुस्तकालय है जो ऐसा कर सकता है?

बहुत धन्यवाद

Answer 1

इसे करने का एक और तरीका है: divक्लासनेम ड्रॉपज़ोन के साथ अपने फॉर्म में एक जोड़ें , और ड्रॉपज़ोन प्रोग्रामेटिक रूप से लागू करें।

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 js + Asp.net: बल्क इमेज अपलोड करने का आसान तरीका

Comments

इसके साथ, वह डिफ़ॉल्ट सबमिट बटन का उपयोग नहीं कर सकता है, यह उसके सवाल का जवाब नहीं देता है

— क्लेमेंट

लेकिन यह अभी भी प्रस्तुत करने के लिए मूल रूप का उपयोग नहीं करता है

— खतरे का समय

यह मेरा मुद्दा था और आपने इसे हल किया, ty @Satindersingh

— Su4p

@ Su4p: मुझे खुशी है कि यह आपकी मदद करता है, आप अपलोड करते समय छवि विवरण के साथ विवरण विवरण के लिए ब्लॉग लेख लिंक भी देख सकते हैं

— सतिंदर सिंह

इससे बहुत मदद मिली, आप किसी भी तत्व को ड्रॉपज़ोन के रूप में सेट कर सकते हैं यदि आप मैन्युअल रूप से url सेटअप करते हैं। मैंने प्राथमिक रूप में एक छिपे हुए / अक्षम क्षेत्र में फ़ाइल नाम पोस्ट करने के लिए सफलता हैंडलर का उपयोग किया।

— DigitalDesignDj 23

Answer 2

मुझे ठीक वैसी ही समस्या थी और मैंने पाया कि वरण सिनयेई का उत्तर केवल वही था जो वास्तव में मूल प्रश्न को हल करता था। हालांकि इसका उत्तर सरल किया जा सकता है, इसलिए यहां एक सरल संस्करण है।

कदम हैं:

1. एक सामान्य रूप बनाएँ (विधि को न भूलें और अब तक arctype args नहीं है क्योंकि इसे dropzone द्वारा अब और नहीं संभाला जाता है)।

2. class="dropzone"(यह कैसे Dropzone इसे करने के लिए संलग्न है) और id="yourDropzoneName"(विकल्प बदलने के लिए प्रयोग किया जाता है ) के साथ एक div डाल दिया ।

3. ड्रॉपज़ोन के विकल्प सेट करें, url को सेट करने के लिए जहां फ़ॉर्म और फ़ाइलों को पोस्ट किया जाएगा, AutoProcessQueue को निष्क्रिय करें (इसलिए यह केवल तब होता है जब उपयोगकर्ता 'सबमिट' दबाता है) और कई अपलोड की अनुमति देता है (यदि आपको इसकी आवश्यकता है)।

4. सबमिट बटन पर क्लिक करने पर डिफ़ॉल्ट व्यवहार के बजाय ड्रॉपज़ोन का उपयोग करने के लिए init फ़ंक्शन सेट करें।

5. फिर भी init फ़ंक्शन में, फ़ाइलों को wih के साथ फ़ॉर्म डेटा भेजने के लिए "sendmultiple" ईवेंट हैंडलर का उपयोग करें।

Voilà! अब आप सामान्य फॉर्म के साथ $ _POST और $ _FILES में डेटा पुनः प्राप्त कर सकते हैं (उदाहरण में यह upload.php में होगा)

एचटीएमएल

<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>

जे एस

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

Comments

यह समाधान अच्छा है और काम करता है, लेकिन डिफ़ॉल्ट सबमिट व्यवहार को रोकने के कारण, यह अब अगले पृष्ठ पर पुनर्निर्देशित नहीं करता है।

— फेलिक्स जी।

@TIIUNDER - पेज पुनः लोड किए बिना ajax कॉल के माध्यम से फॉर्म की जानकारी भेजने के लिए तैयार है - यही कारण है कि e.preventDefault () है;

— जन्म २

@TIUNDER को आप सफलता की घटना में पुनः निर्देशित कर सकते हैं

— doflamingo

क्या processQueue()कॉल के बाद फॉर्म जमा करना संभव है ? मैं उपयोग करने की कोशिश करता हूं submit()या click()दोनों काम नहीं करते हैं।

— ग्रे ली

+1 यह केवल काम करने वाला समाधान प्रतीत होता है। एक-एक करके formata.append करने के बजाय, आप यह भी कर सकते हैं $(":input[name]", $("form")).each(function () { formData.append(this.name, $(':input[name=' + this.name + ']', $("form")).val()); }); (क्षमा करें, मुझे पता नहीं है कि यहाँ

— लाइनब्रीक

Answer 3

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

Comments

पोस्ट के लिए धन्यवाद! मेरी समस्या का समाधान किया। एक और त्वरित प्रश्न, यह तब काम नहीं करता है जब कोई चित्र नहीं चुना जाता है (अपलोड करने के लिए), इसे कैसे हल करें?

— सातो

BTW: यदि आप मॉडल बाइंडिंग के साथ कंट्रोलर एक्शन का उपयोग करते हैं और अपना फॉर्म जमा करते हैं तो यह मॉडल खाली हो जाएगा। किसी कारण से यह विधि वास्तविक डेटा को मॉडल से बांधती नहीं है।

— एडवर्ड चोपुरीन

जब autoProcessQueue = false कोई इवेंट निकाल दिया जाता है

— सिरिल

@ सबमिट बटन पर क्लिक करने पर आप गैलरीफाइल.गेट एसेप्टेड फ़ाइल्स () लंबाई का उपयोग करके ड्रॉपज़ोन पर स्वीकृत फ़ाइलों की लंबाई की जाँच कर सकते हैं और यदि कोई फ़ाइल अपलोड नहीं है तो आपको अपना फॉर्म सबमिट करना चाहिए।

— वरन सिनाय

@EdwardChopuryan यह ड्रॉपजोन द्वारा डेटा जमा करने की विधि से संबंधित नहीं है। संभवतः समस्या आपके एएसपी.नेट एमवीसी जैसे प्लेटफॉर्म पर इनपुट टैग के "नामकरण सम्मेलन" पर है।

— वरन सिनाय

Answer 4

Enyo का ट्यूटोरियल उत्कृष्ट है।

मैंने पाया कि ट्यूटोरियल की सैंपल स्क्रिप्ट ड्रॉपज़ोन (यानी, फॉर्म एलिमेंट) में एम्बेडेड बटन के लिए अच्छी तरह से काम करती है। यदि आप प्रपत्र तत्व के बाहर बटन रखना चाहते हैं, तो मैं एक क्लिक ईवेंट का उपयोग करके इसे पूरा करने में सक्षम था:

सबसे पहले, 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();
        }); 
    }
}

Comments

आपके पास एक फ़ॉर्म के अंदर एक फॉर्म नहीं हो सकता है और सबमिट नहीं किया जा सकता है।

— पौल

जब मैं यह कोशिश करता हूं, तो ड्रॉपजोन-प्रीव्यू कंटेनर को नजरअंदाज कर दिया जाता है। Dropzone फॉर्म के निचले भाग में पूर्वावलोकन जोड़ता है। आपको अपने कॉन्फ़िगरेशन में 'प्रीव्यूसकॉनटेनर:' .dropzone-प्रीव्यूज़ ',' जोड़ना होगा।

— आरोन हिल

यह मूल प्रश्न का उत्तर नहीं देता है। मूल प्रश्न यह था कि ड्रॉपज़ोन को मौजूदा रूप से कैसे उपयोग किया जाए, न कि कार्रवाई को ट्रिगर करने के लिए बटन के स्थान के बारे में।

— CSSian

Answer 5

इसके अलावा, जो वर्गम कह रहा था, ड्रॉपज़ोन में एक अतिरिक्त अनिर्दिष्ट विकल्प है, "हिडनइनपुटकॉनटेनर"। आपको केवल इस विकल्प को उस फॉर्म के चयनकर्ता को सेट करना है, जिसे आप चाहते हैं कि छिपी हुई फ़ाइल फ़ील्ड को जोड़ा जाना है। और वोइला! ड्रॉपडज़ोन में ".dz-hidden-input" फाइल फील्ड जो सामान्य रूप से शरीर में जुड़ जाता है, वह जादुई रूप से आपके फॉर्म में चला जाता है। ड्रॉपज़ोन स्रोत कोड में कोई फेरबदल नहीं।

अब जबकि यह ड्रॉपज़ोन फ़ाइल फ़ील्ड को आपके फ़ॉर्म में ले जाने के लिए काम करता है, फ़ील्ड का कोई नाम नहीं है। इसलिए आपको जोड़ना होगा:

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

to dropzone.js इस लाइन के बाद:

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

547 के आसपास।

Answer 6

मेरे पास इसके लिए अधिक स्वचालित समाधान है।

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>

जावास्क्रिप्ट:

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'));

ड्रॉपज़ोन डिस्कवरी को अक्षम करने की कोई आवश्यकता नहीं है और सामान्य फॉर्म सबमिट मानक प्रपत्र क्रमांकन के माध्यम से किसी भी अन्य फ़ील्ड फ़ील्ड के साथ फ़ाइल भेजने में सक्षम होगा।

यह तंत्र फ़ाइल सामग्री को संसाधित होने पर छिपे हुए इनपुट फ़ील्ड में बेस 64 स्ट्रिंग के रूप में संग्रहीत करता है। आप इसे मानक base64_decode()विधि के माध्यम से पीएचपी में द्विआधारी स्ट्रिंग में वापस डिकोड कर सकते हैं ।

मुझे नहीं पता कि यह विधि बड़ी फ़ाइलों के साथ समझौता करेगी या नहीं, लेकिन यह ~ 40MB फ़ाइलों के साथ काम करती है।

Comments

आप अन्य फ़ील्ड से डेटा को कैसे डीकोड और प्रोसेस करते हैं जो छवियों के साथ एक साथ सबमिट किए जाएंगे?

— sam

@sam अन्य क्षेत्रों को डीकोड करने की आवश्यकता नहीं है। वे पहली बार में इनकोडिंग नहीं हो रहे हैं, केवल फ़ाइल एनकोड हो जाती है।

— उमैर अहमद

क्या आप html, जावास्क्रिप्ट और लार्वा php में पुनः प्राप्त करने के लिए कुछ नमूना कोड साझा कर सकते हैं।

— सैम

यदि आप म्यूटेंट चित्र जोड़ना चाहते हैं तो आपको html फ़ाइल इनपुट को निकालना होगा और इसे प्रत्येक छवि $ ('# fileUpload') के लिए quing js जोड़ना होगा। संलग्न करें ('<इनपुट छिपा नाम = "फाइलें []" मूल्य =' + सामग्री +। /> ') जहां सामग्री बेस 64 एनकोडेड इमेज है।

— एलेक्सीज़म

@codepushr उस समय का एक पुराना उत्तर है, जब हम भुगतान किए गए समाधानों पर विचार नहीं कर रहे थे। अब हमने FileUploader को खरीद लिया है, हालाँकि इसके अपने शीनिगन्स हैं लेकिन यह कहना पर्याप्त है कि इसे लगभग कुछ भी करने के लिए अनुकूलित किया जा सकता है।

— उमैर अहमद

Answer 7

आप अपने ड्रॉपज़ोन से 'भेजने' की घटना को पकड़कर फॉर्मडाटा को संशोधित कर सकते हैं।

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

Comments

मुझे यह उत्तर पसंद है - लेकिन यह मान लिया जाएगा कि फ़ील्डनाम और मूल्य आबाद हो गए हैं। यह अपलोड पर ट्रिगर किया जाता है जो फॉर्म सबमिट करने के लिए एक अलग समय पर हो सकता है। दूसरे पासवर्डों में आप यह नहीं मान सकते कि छवि भेजते समय फॉर्म भर दिया गया है।

— एंटनी

Answer 8

किसी एकल अनुरोध में अन्य प्रपत्र डेटा के साथ सभी फ़ाइलों को सबमिट करने के लिए आप ड्रॉपज़ोन inputको अपने प्रपत्र में अस्थायी छिपे हुए नोड्स की प्रतिलिपि बना सकते हैं । आप 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);
});

वास्तव में यह कार्यान्वयन विवरणों पर निर्भर एक वैकल्पिक हल है। संबंधित स्रोत कोड ।

Comments

मैंने मूल रूप से इस दृष्टिकोण का उपयोग किया था, लेकिन स्पष्ट प्रसंस्करण देरी के कारण, अंत में myDropzone.on("thumbnail", () => {})घटना के तहत फ़ाइल सामग्री प्रसंस्करण को झुका दिया । "addedFile"फ़ाइल पर तुरंत प्रसंस्करण करना अभी भी undefinedएक्सेस पर हो सकता है।

— मत्ती

मैं इसका उपयोग करने की कोशिश कर रहा हूं और यह छिपे हुए फ़ाइल इनपुट फ़ील्ड को फ़ॉर्म में लाने में काम करता है, और जब मैं सबमिट करता हूं, तो पोस्ट डेटा मेरे फ़ील्ड को दिखाता है files[]लेकिन यह रिक्त है कि मैं क्या करूं। कोई विचार? अगर कोई फर्क पड़ता है तो इसे Laravel में करें।

— ज़ेन

हैलो! चयनित फ़ाइल अपलोड क्यों करती है लेकिन यदि फ़ाइल को गिरा दिया जाता है तो नहीं (त्रुटि 4)?

— ingus

Answer 9

मैं यहां एक उत्तर देना चाहता हूं क्योंकि मुझे भी इसी मुद्दे का सामना करना पड़ा है - हम चाहते हैं कि $ _FILES तत्व उसी पोस्ट के हिस्से के रूप में दूसरे रूप में उपलब्ध हो। मेरा जवाब @mrtnmgs पर आधारित है, हालांकि उस सवाल पर टिप्पणी को जोड़ा गया है।

सबसे पहले: Dropzone आजतक के माध्यम से अपना डेटा पोस्ट करता है

सिर्फ इसलिए 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';
        })
    },
});

Answer 10

यह केवल एक और उदाहरण है कि आप मौजूदा रूप में ड्रॉपज़ोन का उपयोग कैसे कर सकते हैं।

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 #botofformहै जिस तरह से अपलोड करते समय आप अपलोड की गई फ़ाइलों के नामों का उपयोग कर सकते हैं।

नोट: मेरी अपलोड स्क्रिप्ट ने theuploadedfilename.jpeg को वापस भेज दिया dubblenote आपको एक क्लीन स्क्रिप्ट भी बनाने की आवश्यकता होगी जो फ़ाइलों के उपयोग के लिए अपलोड निर्देशिका की जांच नहीं करती है और उन्हें हटा नहीं देती है .. एक सामने के अंत में गैर प्रमाणित फॉर्म में :)

Comments

यह अन्य फॉर्म फ़ील्ड्स के साथ ड्रॉपज़ोन इमेज को सबमिट नहीं करता है। आप जो कर रहे हैं वह सामान्य रूप से चित्र अपलोड कर रहा है, छवि नामों को सहेज रहा है, और फिर शेष फ़ील्ड को छवि नामों के साथ पुनः सबमिट कर रहा है।

— ज़ेन

Answer 11

यहाँ मेरा नमूना है, 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>