JQuery - ड्रैग एन ड्रॉप फ़ाइलें - फ़ाइल जानकारी कैसे प्राप्त करें?

Question

JQuery/AJAX/PHP का उपयोग करके अपना खुद का drag'n'drop फ़ाइल अपलोडर बनाने में रूचि है।

असल में मैं एक फ़ाइल अपलोडर चाहता हूं कि मेरी साइट के उपयोगकर्ता सिर्फ अपने कंप्यूटर से फ़ाइल को मेरे द्वारा बनाए गए div में खींच सकें, और फिर यह उनके लिए चयनित गंतव्य पर फ़ाइल अपलोड कर देगा।

मैं केवल खरोंच से इस निर्माण करने के लिए, और किसी भी प्लग-इन का उपयोग नहीं तो यह है कि मैं बेहतर प्रतिबंध (फ़ाइल प्रकारों, आकार, गंतव्य फ़ोल्डर, आदि)

कोई भाग्य के साथ गूगल में घूमते है हेरफेर कर सकते हैं, चाहते हैं प्लगइन्स। क्या मुझे सही दिशा में चल सकता है?

अद्यतन ठीक है, इसलिए मुझे पता चला कि मैं क्या चाहता हूं। बस फ़ाइल इनपुट फ़ील्ड अस्पष्टता को 1 पर सेट करें ताकि यह छिपा हुआ हो, और आप अभी भी उस फ़ाइल को उस सामान्य क्षेत्र में खींच सकते हैं और यदि आप टेक्स्ट फ़ील्ड को दबाते हैं तो यह इसे पकड़ लेगा। हालांकि, मैं जानना चाहता हूं कि फ़ाइल इनपुट फ़ील्ड पर ऊंचाई/चौड़ाई कैसे बढ़ाएं (फ़ाइल पर मूल सीएसएस की कोशिश की, लेकिन यह केवल 'ब्राउज' बटन आकार बढ़ाता है, न कि वास्तविक फ़ील्ड जहां आप फ़ाइल को छोड़ सकते हैं। कोई भी विचार है कि यह कैसे करना है? मैं मूल रूप से एक बड़ा वर्ग div कि 'ड्रॉप फ़ाइल को यहां' का कहना है चाहता हूँ। इसलिए मैं इनपुट क्षेत्र आकार बदलना होगा।

Answer 1

आप एक dropzone बनाने के लिए एचटीएमएल 5 dragenter और dragleave घटनाओं का उपयोग कर सकते हैं।
फिर dropzone के अंदर एक फ़ाइल इनपुट रखने, और सीएसएस के साथ इसे छुपा कर, आप फ़ाइल अपलोड कर सकते हैं जब इनपुट आग के लिए change घटना, इस

var dropzone = $("#dropzone"), 
    input = dropzone.find('input'); 

dropzone.on({ 
    dragenter : dragin, 
    dragleave : dragout 
}); 

input.on('change', drop); 

function dragin(e) { //function for drag into element, just turns the bix X white 
    $(dropzone).addClass('hover'); 
} 

function dragout(e) { //function for dragging out of element       
    $(dropzone).removeClass('hover'); 
} 

function drop(e) { 
    var file = this.files[0]; 
    $('#dropzone').removeClass('hover').addClass('dropped').find('img').remove(); 

    // upload file here 
} 

की तरह

FIDDLE

Answer 2

रुचि रखने वालों के लिए, मैंने पाया इस ट्यूटोरियल/डेमो सहायक हो: http://www.viget.com/inspire/custom-file-inputs-with-a-bit-of-jquery/

मूल रूप से एक <span> का उपयोग करता डिफ़ॉल्ट इनपुट क्षेत्र को कवर किया।

Answer 3

बस यहां पर झुकने के लिए, क्योंकि मैं इसे पिछले कुछ दिनों से भी कर रहा हूं। यदि आप jQuery के माध्यम से ड्रॉप इवेंट को बाध्य कर रहे हैं, तो मुझे समझने के लिए आपको jQuery द्वारा प्रदान की गई घटना में event.originalEvent ऑब्जेक्ट से जाकर event.dataTransfer ऑब्जेक्ट तक पहुंचने की आवश्यकता है।

उदाहरण:

इस मैं दोनों dragover रूप में अच्छी तरह drop के रूप में की घटनाओं के लिए बाध्य, के रूप में यह यह डिफ़ॉल्ट कार्रवाई प्रदर्शन रोकने के लिए जरूरी हो गया था में (में पाया गया कि यहां समाधान: Prevent the default action. Working only in chrome)

$('#dropzone').bind('dragover drop', function(event) { 
    event.stopPropagation(); 
    event.preventDefault(); 
    if (event.type == 'drop') { 
     console.log(event.originalEvent.dataTransfer.files); 
    } 
}); 

यह भी एक बग प्रतीत होता है जहां console.log()event.dataTransfer (या event.originalEvent.dataTransfer) यह फाइल सरणी खाली है, यह यहां बताया गया है: event.dataTransfer.files is empty when ondrop is fired?

बेहतर ऑप्स सवाल का जवाब करने के लिए (मैं सिर्फ यह के बाकी पर गौर किया और मैं जानता हूँ कि यह पुरानी है, लेकिन कुछ एक यह सहायक हो सकते हैं):

मेरे कार्यान्वयन jQuery में है, इसलिए मुझे आशा है कि ठीक है:

var files = []; 

// Attaches to the dropzone to pickup the files dropped on it. In mine this is a div. 
$("#dropzone").bind('dragover drop', function(event) { 
    // Stop default actions - if you don't it will open the files in the browser 
    event.stopPropagation(); 
    event.preventDefault(); 

    if (e.type == 'drop') { 
     files.push(event.originalEvent.dataTransfer.files); 
    } 
}); 

// Attach this to a an input type file so it can grab files selected by the input 
$("#file-input").bind('change', function(event) { 
    files.push(event.target.files); 
}); 

// This is a link or button which when clicked will do the ajax request 
// and upload the files 
$("#upload-button").bind('click', function(event) { 
    // Stop the default actions 
    event.stopPropagation(); 
    event.preventDefault(); 

    if (files.length == 0) { 
     // Handle what you want to happen if no files were in the "queue" on clicking upload 
     return; 
    } 

    var formData = new FormData(); 
    $.each(files, function(key, value) { 
     formData.append(key, value); 
    }); 

    $.ajax({ 
     url: 'upload-ajax', 
     type: 'POST', 
     data: formData, 
     cache: false, 
     dataType: 'json', 
     processData: false, // Don't process the files - I actually got this and the next from an SO post but I don't remember where 
     contentType: false, // Set content type to false as jQuery will tell the server its a query string request 
     success: function(data, textStatus, jqXHR) { /* Handle success */ }, 
     error: function(jqXHR, textStatus, errorThrown) { /* Handle error */ } 
    }); 

}); 

तुम भी में dropzone फीका बनाने की तरह प्रभाव करने के लिए स्वीकार किए जाते हैं जवाब में अन्य घटनाओं के लिए बाध्य कर सकता है ताकि आप इसे देख सकते हैं (यह है कि मेरे पुस्तकालय के लिए मेरी कार्यसूची सूची में है)। हालांकि, मैं उपयोग किए जाने वाले वास्तविक AJAX फ़ाइल अपलोड का मूल है।

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