Dropzone.js অন্যান্য ক্ষেত্রের সাথে বিদ্যমান HTML ফর্মের সাথে সংহত করা

Question

আমার কাছে বর্তমানে একটি এইচটিএমএল ফর্ম রয়েছে যা ব্যবহারকারীরা তাদের পোস্ট করতে চান এমন একটি বিজ্ঞাপনের বিশদ পূরণ করে। আমি এখন বিক্রয়ের জন্য আইটেমের চিত্র আপলোড করার জন্য একটি ড্রপজোন যুক্ত করতে সক্ষম হতে চাই ।

আমি ড্রপজোন.জেস পেয়েছি যা মনে হয় যা আমার প্রয়োজনের বেশিরভাগ ক্ষেত্রে করে। যাইহোক, ডকুমেন্টেশন সন্ধানের সময়, এটি প্রদর্শিত হবে যে আপনাকে পুরো ফর্মের শ্রেণি নির্দিষ্ট করতে হবে dropzone(কেবলমাত্র ইনপুট উপাদানটির বিপরীতে )। এর অর্থ হ'ল আমার পুরো ফর্মটি ড্রপজোন হয়ে যায় ।

আমার ফর্মের কেবলমাত্র অংশে ড্রপজোন ব্যবহার করা কি সম্পূর্ণ ফর্মের চেয়ে ক্লাস "ড্রপজোন" হিসাবে নির্দিষ্ট উপাদান দ্বারা নির্দিষ্ট করা সম্ভব ?

আমি পৃথক ফর্মগুলি ব্যবহার করতে পারতাম, তবে আমি চাই যে ব্যবহারকারী একটি বোতামের সাহায্যে এটি সমস্ত জমা দিতে সক্ষম হন।

বিকল্পভাবে, অন্য লাইব্রেরি আছে যা এটি করতে পারে?

অনেক ধন্যবাদ

Answer 1

এটি করার আরও একটি উপায় এখানে রয়েছে: divআপনার ফর্মটিতে একটি ক্লাসের নাম ড্রপজোন যুক্ত করুন এবং ড্রপজোন প্রোগ্রামিয়ালি প্রয়োগ করুন।

এইচটিএমএল:

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

দ্রষ্টব্য: অটোডিস্কভার অক্ষম করা, অন্যথায় ড্রপজোন দু'বার সংযুক্ত করার চেষ্টা করবে

ব্লগ আর্টিকেল : ড্রপজোন জেএস + অ্যাসপ.net: বাল্ক ইমেজ আপলোড করার সহজ উপায়

Comments

এটির সাথে, সে ডিফল্ট সাবমিট বাটনটি ব্যবহার করতে পারে না, এটি তার প্রশ্নের কোনও উত্তর দেয় না

— ক্লিমেন্ট

তবে এটি জমা দেওয়ার জন্য এখনও মূল ফর্মটি ব্যবহার করে না

— ড্যাঞ্জেল

এটি আমার সমস্যা ছিল এবং আপনি এটি সমাধান করেছেন, ty @Satindersingh

— Su4p

@ এস 4 পি: খুশি হলাম এটি আপনাকে সহায়তা করে, আপলোড করার সময় আপনি পুনরায় আকারের চিত্রের বিকল্পের সাথে বিশদ ব্যাখ্যার জন্য ব্লগ নিবন্ধের লিঙ্কটিও পরীক্ষা করতে পারেন

— সতিন্দর সিংহ

এটি অনেক সাহায্য করেছে, আপনি নিজে ইউআরএল সেটআপ করলে আপনি কোনও উপাদানকে ড্রপজোন হিসাবে সেটআপ করতে পারেন। আমি সাফল্য হ্যান্ডলারটি প্রাথমিক ফর্মের মধ্যে একটি লুকানো / অক্ষম ক্ষেত্রে ফাইলের নাম পোস্ট করতে ব্যবহার করি।

— ডিজিটাল ডিজাইনডিজে

Answer 2

আমার ঠিক একই সমস্যা ছিল এবং আমি দেখতে পেলাম যে বারাণ সিনাইয়ের উত্তরই কেবলমাত্র আসল প্রশ্নটি সমাধান করেছিল। এই উত্তরটি যদিও সরল করা যায়, তাই এখানে একটি সহজ সংস্করণ।

পদক্ষেপগুলি হ'ল:

1. একটি সাধারণ ফর্ম তৈরি করুন (পদ্ধতিটি এবং এনটাইপ আরগগুলি ভুলে যাবেন না কারণ এটি আর ড্রপজোন দ্বারা পরিচালিত হয় না)।

2. এর সাথে একটি ডিভ রাখুন class="dropzone"( এটিই ড্রপজোন এটিতে সংযুক্ত করে) এবং id="yourDropzoneName"(বিকল্পগুলি পরিবর্তন করতে ব্যবহৃত হয়)।

3. ফর্ম এবং ফাইলগুলি যেখানে পোস্ট করা হবে সেখানে ইউআরএল সেট করতে ড্রপজোনের বিকল্পগুলি সেট করুন, অটোপ্রসেসকুইউ নিষ্ক্রিয় করুন (সুতরাং এটি তখনই ঘটে যখন ব্যবহারকারীরা 'সাবমিট' চাপ দেয়) এবং একাধিক আপলোডের অনুমতি দেয় (যদি আপনার প্রয়োজন হয়)।

4. জমা বোতামটি ক্লিক করা হলে ডিফল্ট আচরণের পরিবর্তে Dropzone ব্যবহারের জন্য init ফাংশন সেট করুন।

5. এখনও ডিআই ফাংশনে, ফাইলগুলি সহ ফর্মের ডেটা প্রেরণ করতে "সেন্ডিং মাল্টিপলএল" ইভেন্ট হ্যান্ডলারটি ব্যবহার করুন।

ভয়েল! আপনি এখন স্বাভাবিক ফর্মের সাথে, $ _POST এবং $ _FILES তে যেমন পুনরুদ্ধার করতে পারেন (উদাহরণস্বরূপ এটি আপলোড.এফপি হবে)

এইচটিএমএল

<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

এই সমাধানটি দুর্দান্ত এবং কাজ করে তবে ডিফল্ট জমা দেওয়ার আচরণকে আটকা দেওয়ার কারণে এটি পরবর্তী পৃষ্ঠায় আর পুনঃনির্দেশ দেয় না।

— ফেলিক্স জি

@ আইটিআইএনডিআর - এটি পৃষ্ঠা পুনরায় লোড ছাড়াই অজ্যাক্স কলের মাধ্যমে ফর্ম তথ্য প্রেরণের জন্য প্রস্তুত - সেখানে কেন e.preventDefault () রয়েছে;

— 2fr4g

@ সত্য অনুসারে আপনি সাফল্যের ইভেন্টে পুনর্নির্দেশ যুক্ত করতে পারেন

— 6:48

processQueue()কল করার পরে কি ফর্মটি জমা দেওয়া সম্ভব ? আমি চেষ্টা করার চেষ্টা করি submit()বা click(), উভয়ই কাজ করে না।

— ধূসর লি

+1 এটি একমাত্র কার্যকরী সমাধান বলে মনে হচ্ছে। একে একে ফর্মডাটা.অ্যাপেন্ড করার পরিবর্তে আপনিও করতে পারেন $(":input[name]", $("form")).each(function () { formData.append(this.name, $(':input[name=' + this.name + ']', $("form")).val()); }); (দুঃখিত আমি এখানে

— লাইনব্র্যাকগুলি

Answer 3

চিত্রগুলি আপলোড করার জন্য "ড্রপজোন.জেএস" হ'ল সাধারণ লাইব্রেরি। আপনি যদি নিজের ফর্মের অংশ হিসাবে "ড্রপজোন.জেএস" রাখতে চান তবে আপনার নিম্নলিখিত পদক্ষেপগুলি করা উচিত:

1) ক্লায়েন্ট পক্ষের জন্য:

এইচটিএমএল:

    <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) সার্ভার পক্ষের জন্য:

এএসপি.নেট এমভিসি

    [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

পোস্টের জন্য ধন্যবাদ! আমার সমস্যার সমাধান। আর একটি তাত্ক্ষণিক প্রশ্ন, কোনও চিত্র নির্বাচন করা না হলে এটি কাজ করে না (আপলোড করতে), কীভাবে এটি সমাধান করবেন?

— সাটো

বিটিডাব্লু: আপনি যদি মডেল বাইন্ডিং সহ কন্ট্রোলার অ্যাকশন ব্যবহার করেন এবং আপনার ফর্মটি এইভাবে জমা দেয় তবে মডেল খালি হবে। কিছু কারণে এই পদ্ধতিটি মডেলটির সাথে প্রকৃত ডেটা আবদ্ধ করে না।

— এডওয়ার্ড চপুরিয়ান

যখন autoProcessQueue = মিথ্যা কোন ঘটনা বহিস্কার করা হয়

— Cyril

জমা দেওয়ার বোতামের ক্লিক ইভেন্টে স্যাটো আপনি গ্যালারীফাইল.জেটএসেপটেড ফাইলস () দৈর্ঘ্য ব্যবহার করে ড্রপজোনটিতে গৃহীত ফাইলগুলির দৈর্ঘ্য পরীক্ষা করতে পারবেন এবং যদি কোনও ফাইল আপলোড না হয় তবে আপনার ফর্মটি জমা দিতে হবে।

— বারাণ সিনায়েই

@ এডওয়ার্ডকপুরিয়ান এটি ড্রপজোন দ্বারা ডেটা জমা দেওয়ার পদ্ধতির সাথে সম্পর্কিত নয়। আপনার প্ল্যাটফর্মের ইনপুট ট্যাগগুলির যেমন "এএসপি.নেট এমভিসি" এর "নামকরণের কনভেনশন" তে সমস্যা সম্ভবত রয়েছে।

— বারাণ সিনায়েই

Answer 4

এনিওর টিউটোরিয়ালটি দুর্দান্ত।

আমি দেখতে পেয়েছি যে টিউটোরিয়ালের নমুনা স্ক্রিপ্ট ড্রপজোন (যেমন ফর্ম উপাদান) এমবেড করা বোতামের জন্য ভাল কাজ করেছে। আপনি যদি ফর্ম উপাদানটির বাইরে বোতাম রাখতে চান তবে আমি ক্লিক ইভেন্টটি ব্যবহার করে এটি সম্পাদন করতে সক্ষম হয়েছি:

প্রথম, এইচটিএমএল:

<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

আপনার কোনও ফর্মের মধ্যে একটি ফর্ম থাকতে পারে এবং জমা দিতে পারবেন না।

— পল

আমি যখন এটি চেষ্টা করি তখন ড্রপজোন-পূর্বরূপের ধারকটি উপেক্ষা করা হবে বলে মনে হয়। ড্রপজোন ফর্মের নীচে প্রাকদর্শনগুলি যুক্ত করে adds আপনার কনফিগারেশনে আপনাকে 'প্রাকদর্শন কনটেনার:' .pdzzone- প্রাকদর্শন 'যুক্ত করতে হবে।

— অ্যারোন হিল

এটি মূল প্রশ্নের উত্তর দেয় না। মূল প্রশ্নটি ছিল কীভাবে কোনও ক্রমে ট্রিগার করতে বোতামটির অবস্থান সম্পর্কে নয়, কোনও বিদ্যমান ফর্মের সাথে কীভাবে ড্রপজোন ব্যবহার করবেন।

— CSSian

Answer 5

স্ক্রাম কী বলছিল তার আরও ਅੱਗੇ, ড্রপজোনের একটি অতিরিক্ত অনির্ধারিত বিকল্প রয়েছে, "লুকিয়ে থাকা ইনপুটকন্টেইনার"। আপনাকে যা করতে হবে তা হ'ল ফর্ম ফিল্ড ক্ষেত্রটি সংযুক্ত করতে চান এমন ফর্মের নির্বাচকের কাছে এই বিকল্পটি সেট করতে হবে। ও ভয়েলা! ".Dz-hide-ইনপুট" ফাইলের ক্ষেত্র যা ড্রপজোন সাধারণত দেহে জাদুকরভাবে যুক্ত করে আপনার ফর্মের মধ্যে। ড্রপজোন উত্স কোডে কোনও পরিবর্তন হয়নি।

এখন এটি ড্রপজোন ফাইল ক্ষেত্রটিকে আপনার ফর্মের মধ্যে স্থানান্তরিত করার জন্য কাজ করে তবে ক্ষেত্রটির কোনও নাম নেই। সুতরাং আপনার যোগ করতে হবে:

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

এই লাইনের পরে ড্রপজোন.জেএস:

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

547 লাইন কাছাকাছি।

Answer 6

এর জন্য আমার আরও একটি স্বয়ংক্রিয় সমাধান রয়েছে।

এইচটিএমএল:

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

লারাভেল:

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

ড্রপজোন আবিষ্কারকে অক্ষম করার দরকার নেই এবং সাধারণ ফর্ম জমাটি স্ট্যান্ডার্ড ফর্ম সিরিয়ালাইজেশনের মাধ্যমে অন্য কোনও ফর্ম ক্ষেত্রের সাথে ফাইলটি পাঠাতে সক্ষম হবে।

প্রক্রিয়া হওয়ার পরে এই প্রক্রিয়াটি লুকানো ইনপুট ক্ষেত্রে ফাইলের সামগ্রীগুলিকে বেস 64 স্ট্রিং হিসাবে সংরক্ষণ করে। আপনি মান base64_decode()পদ্ধতির মাধ্যমে পিএইচপি-তে বাইনারি স্ট্রিংয়ে এটি আবার ডিকোড করতে পারেন ।

আমি জানি না যে এই পদ্ধতিটি বড় ফাইলগুলির সাথে আপস করবে কিনা তবে এটি ~ 40MB ফাইলের সাথে কাজ করে।

Comments

আপনি কীভাবে অন্য ক্ষেত্রগুলির ডেটা ডিকোড এবং প্রক্রিয়া করবেন যা চিত্রগুলির সাথে একত্রে জমা দেওয়া হবে?

— স্যাম

@ স্যাম অন্যান্য ক্ষেত্রগুলি ডিকোড করার দরকার নেই। তারা প্রথম স্থানে এনকোড পাচ্ছে না, কেবল ফাইল এনকোড হবে।

— উমায়ের আহমেদ

আপনি কি এইচটিএমএল, জাভাস্ক্রিপ্ট এবং লারাভেল পিএইচপি কীভাবে পুনরুদ্ধার করবেন তার জন্য কিছু নমুনা কোড ভাগ করতে পারেন।

— সাম

আপনি যদি একাধিক চিত্র যুক্ত করতে চান তবে আপনাকে এইচটিএমএল ফাইলের ইনপুটটি সরাতে হবে এবং প্রতিটি চিত্রের জন্য এটি কোয়েস জেএস যুক্ত করতে হবে '(' # ফাইলআপলোড ') app /> ') যেখানে সামগ্রীটি বেস 64 এনকোডড চিত্র।

— এলেএক্সজেপিএম

@ কোডপুশার এটির একটি পুরানো উত্তর ভাল যা আমরা প্রদত্ত সমাধানগুলি বিবেচনা করছিলাম না। এখন আমরা ফাইলআপলোডার কিনেছি, যদিও এর নিজস্ব শেনানিগান রয়েছে তবে এটি প্রায় যে কোনও কিছুতে কাস্টমাইজ করা যায় বলে যথেষ্ট।

— উমাইর আহমেদ

Answer 7

আপনি আপনার ড্রপজোন থেকে 'প্রেরণ' ইভেন্টটি ধরে ফর্মডাটাটি সংশোধন করতে পারেন।

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

Comments

আমি এই উত্তরটি পছন্দ করি - তবে এটি ধরে নেবে যে ক্ষেত্রের নাম এবং মানটি জনবহুল হয়েছে। এটি আপলোডটিতে ট্রিগার করা হয়েছে যা ফর্ম জমা দেওয়ার জন্য পৃথক সময়ে হতে পারে। অন্য ওয়ার্ডে আপনি ধরে নিতে পারবেন না যে ছবিটি প্রেরণ করার সময় ফর্মটি পূরণ হয়ে গেছে।

— অ্যান্টনি

Answer 8

একক অনুরোধে অন্য ফর্ম ডেটার পাশাপাশি সমস্ত ফাইল জমা দেওয়ার জন্য আপনি Dropzone.js অস্থায়ী লুকানো 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[]তবে আমি যা করি তা ফাঁকা থাকে। কোন ধারনা? এটি কোনও পার্থক্য তৈরি করে থাকলে লারাভেলে এটি করা।

— জেন

হ্যালো! নির্বাচিত ফাইল আপলোড করে তবে ফাইলটি যদি বাদ পড়ে যায় তবে (ত্রুটি 4)?

— ইঙ্গুস

Answer 9

আমিও এখানে একই প্রশ্নের জবাব দিতে চাই কারণ আমিও একই সমস্যার মুখোমুখি হয়েছি - আমরা চাই যে post _FILES উপাদানটি অন্য পোস্ট হিসাবে একই পোস্টের অংশ হিসাবে উপলব্ধ। আমার উত্তর @ mrtnmgs এর উপর ভিত্তি করে তবে সেই প্রশ্নের সাথে যুক্ত মন্তব্যগুলিকে নোট করে।

প্রথমত: ড্রপজোন এটিজ্যাক্সের মাধ্যমে তার ডেটা পোস্ট করে

কেবলমাত্র আপনি formData.appendবিকল্পটি ব্যবহারের অর্থ এখনও আপনার ইউএক্স ক্রিয়াগুলি মোকাবেলা করতে হবে - অর্থাত্ এই সমস্তটি পর্দার আড়ালে ঘটে এবং কোনও সাধারণ ফর্ম পোস্ট নয়। আপনার urlপ্যারামিটারে ডেটা পোস্ট করা হয়েছে ।

দ্বিতীয়ত: আপনি যদি কোনও ফর্ম পোস্ট নকল করতে চান তবে আপনাকে পোস্ট করা ডেটা সংরক্ষণ করতে হবে

এটি আপনার $_POSTবা $_FILESএকটি সেশনে সংরক্ষণ করার জন্য সার্ভার সাইড কোডের প্রয়োজন যা অন্য পৃষ্ঠার লোডে ব্যবহারকারীর জন্য উপলব্ধ যেহেতু ব্যবহারকারী পোস্ট করা ডেটা প্রাপ্ত পৃষ্ঠায় যাবে না।

তৃতীয়ত: আপনাকে এই পৃষ্ঠায় ব্যবহারকারীকে পুনর্নির্দেশ করতে হবে যেখানে এই ডেটাটি করা হয়

এখন আপনি আপনার ডেটা পোস্ট করেছেন, এটি একটি সেশনে সংরক্ষণ করেছেন, আপনাকে অতিরিক্ত পৃষ্ঠায় ব্যবহারকারীর জন্য এটি প্রদর্শন / ক্রিয়া করতে হবে। আপনাকে সেই পৃষ্ঠাতে ব্যবহারকারীকে প্রেরণ করতে হবে।

সুতরাং আমার উদাহরণের জন্য:

[ড্রপজোন কোড: জ্যাকুরি ব্যবহার করে]

$('#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 +'">');
}

এটি ধরে নিয়েছে আপনার #botofformআপলোড করার সময় আইডির সাথে একটি ডিভ রয়েছে আপনি আপলোড করা ফাইলগুলির নাম ব্যবহার করতে পারেন।

দ্রষ্টব্য: আমার আপলোড স্ক্রিপ্টটি আপলোডেড ফাইল ফাইলটি ফেরত দিয়েছে j

Comments

এটি অন্য ফর্ম ক্ষেত্রে একসাথে ড্রপজোন চিত্র জমা দেয় না doesn't আপনি যা করছেন তা হ'ল চিত্রগুলি আপলোড করা হয়, চিত্রের নামগুলি সংরক্ষণ করা হয় এবং তারপরে চিত্রের নাম সহ ফর্মের ক্ষেত্রগুলি পুনরায় জমা দেওয়া।

— জেন

Answer 11

এখানে আমার নমুনাটি জ্যাঙ্গো + ড্রপজোন ভিত্তিক। ভিউ নির্বাচন করেছে (প্রয়োজনীয়) এবং জমা দিন।

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