jquery fileupload मूल

Question

के साथ प्रोग्रामेटिक रूप से फ़ाइलों को हटाएं मैं बहुआयामी अपलोड को लागू करने के लिए ब्लूंप फ़ाइल अपलोड प्लगइन (मूल संस्करण) का उपयोग कर रहा हूं। मैं अपलोड करने के लिए कतारबद्ध फ़ाइलों को हटाने की अनुमति देने के लिए कार्यक्षमता को कार्यान्वित करने की कोशिश कर रहा हूं। मैं यह नहीं समझ सकता कि फाइल सरणी को उचित तरीके से कैसे एक्सेस किया जाए। प्रत्येक बार कॉलबैक में, इंडेक्स 0 है और फाइल सरणी लंबाई 1 है (इसमें केवल उस फ़ाइल को शामिल किया गया है जिसे उपयोगकर्ता को निकालने के लिए क्लिक किया गया है)। मैं एक div को कतारबद्ध प्रत्येक फ़ाइल के लिए एक लिंक जोड़ रहा हूं, जो क्लिक करने योग्य है और क्लिक किए जाने पर फ़ाइल को हटा देना चाहिए।

मेरा विचार था कि फ़ाइल के इंडेक्स के साथ एक निकास लिंक बनाना और सरणी से इसे हटा देना था, लेकिन ऊपर बताई गई समस्या के कारण, सूचकांक कभी सही नहीं होता है। मैंने फ़ाइल नाम से भी कोशिश की है, लेकिन "ऑन" कॉलबैक में फ़ाइल नाम हमेशा पहली फ़ाइल है जिसे अपलोड के लिए चुना गया था - कुछ क्लोजर स्कोपिंग मुझे पता लगाना है।

मैं अपलोड कतार से फ़ाइलों को प्रोग्रामेटिक रूप से कैसे हटा सकता हूं?

HTML:

<div id="fileBrowserWrapper"> 
    <form id="myForm" action="#" method="post" enctype="multipart/form-data"> 
     <input id="uploadDocBrowse" type="file" name="files[]" multiple/>              
    </form> 
</div> 
<div id="inputFilesBox"></div> 
<div id="uploadFilesBox"></div> 

और फ़ाइल जावास्क्रिप्ट अपलोड करें:

$('#myForm').fileupload({ 
    url: "/SomeHandler", 
    dataType: 'html', 
    autoUpload: false, 
    singleFileUploads: false, 
    replaceFileInput: false, 
    add: function (e, data) { 
     console.log("Number of files: " + data.files.length); 

     $.each(data.files, function (index, file) {          
      $('#uploadFilesBox').append("<div class='uploadBox' id='fileDiv_" + file.name + "'><div class='leftEle'><a href='#' id='link_" + index + "' class='removeFile'>Remove</a></div><div class='midEle'>" + file.name + "</div></div>") 
      .on('click', { filename: file.name, files: data.files }, function(event) {        
       var uploadFilesBox = $("#uploadFilesBox"); 
       var remDiv = $("#fileDiv_" + event.data.filename); 
       remDiv.remove(); 
       event.data.files.splice(0, 1);        
      } 
     }); 
    }); 

    data.context = $('#myButton') 
    .click(function() { 
     data.submit(); 
    });    
}); 

Answer 1

मैं इस हल किया। विवरण के साथ समाधान यहां दिया गया है:

मुझे इसके साथ कुछ और टंकण करने के बाद मेरा समाधान मिला। कुंजी याद रख रही थी कि मैं वापस कॉल में था। तो इवेंट हैंडलर को हटाने की कार्यक्षमता के लिए, मैंने सिर्फ डेटा.फाइल सरणी को शून्य कर दिया है, और उस हैंडलर के लिए सबमिट में, मैं केवल तभी सबमिट करता हूं जब फाइल सरणी की लंबाई 0 से अधिक हो। मैंने इवेंट हैंडलर फ़ंक्शन को साफ़ किया है आंखों पर यह आसान है। एचटीएमएल अपरिवर्तित है।

न्यू जावास्क्रिप्ट निपटने कोड:

$('#myForm').fileupload({ 
      url: "/SomeUrl", 
      dataType: 'html',    
      add: function (e, data) { 
       $.each(data.files, function (index, file) { 
        var newFileDiv = $("<div class='uploadBox' id='fileDiv_" + file.name + "'><div class='leftEle'><a href='#' id='link_" + index + "' class='removeFile'>Remove</a></div><div class='midEle'>" + file.name + "</div></div>"); 
        $('#uploadFilesBox').append(newFileDiv); 

        newFileDiv.find('a').on('click', { filename: file.name, files: data.files }, function (event) {       
         event.preventDefault(); 
         var uploadFilesBox = $("#uploadFilesBox"); 
         var remDiv = $(document.getElementById("fileDiv_" + event.data.filename)); 
         remDiv.remove();       
         data.files.length = 0; //zero out the files array          
        }); 

        data.context = newFileDiv; 
       }); 

       $('#myButton') 
        .click(function() { 
         if (data.files.length > 0) {  //only submit if we have something to upload 
          data.submit(); 
         }              
        }); 
      } 
}); 

Answer 2

एकाधिक फ़ाइलों के लिए मेरे लिए काम करता है - यह सभी फाइलों की जांच करता है और नष्ट नहीं होती है जब त्रुटि के साथ फ़ाइल सभी फाइलों के बीच में एक (जैसे .splice() या है .lenght=0 करें)। आइडिया है: सत्यापन करना -> यदि त्रुटि: त्रुटि के साथ फ़ाइल का निशान सूचकांक -> के बाद सभी फाइलों/अपलोड करने से पहले: हटाने/$.grep()द्वारा गलत अनुक्रमणिका/फ़ाइलों को हटाने -> अच्छा फ़ाइलें एक साथ अपलोड singleFileUploads: false।

$(this).fileupload({ 
     // ... 
     singleFileUploads: false, // << send all together, not single 
     // ... 
     add: function (e, data) { 

      // array with all indexes of files with errors 
      var error_uploads_indexes = []; 

      // when add file - each file 
      $.each(data.files, function(index, file) { 

       // array for all errors - in example is only one: size 
       var uploadErrors = []; 

       // ... validation 

         // check size 
         if(data.files[index]['size'] > 1048576) { 
          uploadErrors.push('Filesize is too big'); 
         }; 
       // ... 

       // when errors 
       if(uploadErrors.length > 0) { 

        // mark index of error file 
        error_uploads_indexes.push(index); 
        // alert error 
        alert(uploadErrors.join("\n")); 

       }; 

      }); // << each 


      // remove indexes (files) with error 
      data.files = $.grep(data.files, function(n, i) { 
       return $.inArray(i, error_uploads_indexes) ==-1; 
      }); 


      // if are files to upload 
      if(data.files.length){ 
       // upload by ajax 
       var jqXHR = data.submit().done(function (result, textStatus, jqXHR) { 
         //... 
        alert('done!') ; 
         // ... 
       }); 
      } // 

     }, 
     // ... 
    }); // << file_upload 

Answer 3

उस @Furynation के लिए धन्यवाद।

मैंने जो किया वह आपके दृष्टिकोण के समान था। प्रत्येक फ़ाइल के लिए मैं चुनता हूं कि मैं एक तालिका में एक पंक्ति जोड़ता हूं (प्री अपलोड सबमिशन)। यह पंक्ति मैं बाद में उपयोग के लिए उपयोग करने के लिए data.context को असाइन करता हूं।

देखें: https://github.com/blueimp/jQuery-File-Upload/issues/3083

मेरे कोड स्निपेट जोड़ने कॉलबैक हैंडलर में है:

$("#upload").click(function() { 
       if (data.files.length > 0) { 
        data.submit(); 
       } 
      }); 
      data.context.find('a').on('click',function (event) { 
       event.preventDefault(); 
       data.context.remove(); 
       data.files.length = 0; 
      }); 

इस तालिका पंक्ति दूर करता है और सरणी रीसेट करता है।

यदि कोई क्लीनर तरीका है, तो कृपया मुझे बताएं।