ड्रॉपज़ोन एकाधिक क्षेत्र एक ही रूप में

Question

मैं जटिल रूप बना रहा हूं और मैं फ़ाइलों को अपलोड करने के लिए एकाधिक (अलग) dropzone.js का उपयोग करना चाहता हूं।

@using (Html.BeginForm()) 
{ 
    @Html.AntiForgeryToken() 
... form elements... 
<div id="files" name="files" class="dropzone"></div> 
} 

और जे एस:

Dropzone.options.files = { 
    autoProcessQueue: false, 
    uploadMultiple: true, 
    parallelUploads: 100, 
    maxFiles: 100, 

    paramName: "file", // The name that will be used to transfer the file 
    maxFilesize: 8, // MB 
    url: "/pathToAction" 
}; 

मैं एक ही समय में फ़ाइलों और फार्म के डेटा भेजने के लिए चाहते हैं, उन्हें करने के लिए एक वस्तु को मैप किया

यहाँ मैं कैसे किया जाता है नियंत्रक लेकिन ड्रॉपज़ोन को फ़ाइल अपलोड स्वीकार करने के लिए "यूआरएल" होना चाहिए ... इसे कैसे ठीक करें? शायद मैं फॉर्म तत्व का यूआरएल प्राप्त कर सकता हूं और इसे यूआरएल पैरामीटर में डाल सकता हूं?

Answer 1

तुम एक @ Url.Action सहायक

... 
    paramName: "file", // The name that will be used to transfer the file 
    maxFilesize: 8, // MB 
    url: "@Url.Action("actionname")" 
}; 

Answer 2

के रूप में मैं गूगल पर खोज के साथ कार्रवाई करने के लिए पथ बनाने के लिए, वहाँ कोई रास्ता नहीं है उसी यूआरएल के साथ कई "dropzone" के लिए एक अनुरोध भेजने के लिए है, इसलिए मैंने निम्न चरणों से मैन्युअल रूप से इस समस्या को हल किया:

1) ड्रॉपज़ोन वास्तव में छवियों को थंबनेल पूर्वावलोकन के लिए बेस 64 स्ट्रिंग में बदलता है और फिर यह उस स्ट्रिंग को "img" टैग के स्रोत में जोड़ता है। तो तुम उस छवि "src" और "alt" पढ़ा है, और भी उन्हें निम्नलिखित के रूप में गतिशील रूप से छिपा इनपुट प्रकार को जोड़ने की जरूरत है:

$('#btnUpload').on('click', function() { 
     $.each($("img[data-dz-thumbnail]"), function(index, value) { 
      $('<input>').attr({ 
       type: 'hidden', 
       name: 'myHiddenFiles[' + index + '].Key', 
       value: $(value).attr("alt") 
      }).appendTo('#newsForm'); 

      $('<input>').attr({ 
       type: 'hidden', 
       name: 'myHiddenFiles[' + index + '].Value', 
       value: $(value).attr("src") 
      }).appendTo('#upload-Invoices'); 
     }); 
     $("#upload-Invoices").submit(); 
    }); 

दोहराएँ प्रत्येक dropzone के लिए इस कोड आप अपने डेटा पोस्ट करने के लिए की जरूरत है।

2) अपनी क्रिया विधि पर, आपको फ़ाइल नाम और बेस 64 स्ट्रिंग प्रारूप के साथ फ़ाइल सामग्री प्राप्त करने के लिए "शब्दकोश" प्रकार के साथ पैरामीटर जोड़ने की आवश्यकता है। फिर आप बेस 64 स्ट्रिंग को छवि के रूप में पार्स कर सकते हैं, इसे फ़ाइल के रूप में स्टोर कर सकते हैं और अपना फॉर्म डेटा डेटाबेस में सहेज सकते हैं। आप निम्नलिखित के रूप में संबंधित स्निपेट कोड देख सकते हैं:

 [HttpPost] 
     [ValidateAntiForgeryToken] 
     public ActionResult Create(ModelClass model, IDictionary<string, string> myHiddenFiles) 
     { 
      if (ModelState.IsValid) 
      { 
       foreach (var file in myHiddenFiles) 
       { 
        var base64 = file.Value.Substring(file.Value.IndexOf(',') + 1).Trim('\0'); 
        var bytes = Convert.FromBase64String(base64); 

        var saveFile = Server.MapPath("~/Images/" + file.Key); 
        System.IO.File.WriteAllBytes(saveFile, bytes); 

        // Save your model to database.... 
       } 
      } 
      return View(); 
     }