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

Question

के साथ फ़ाइल डाउनलोड शुरू करने दें मान लें कि मेरे पास मेरी साइट पर फ़ाइलों के लिए लिंक डाउनलोड हैं।

इन लिंक पर क्लिक करते समय सर्वर पर एक AJAX अनुरोध भेजें जो फ़ाइल के स्थान के साथ यूआरएल देता है।

मैं क्या करना चाहता हूं, जब प्रतिक्रिया वापस आती है तो ब्राउज़र को फ़ाइल डाउनलोड करने के लिए निर्देशित किया जाता है। क्या ऐसा करने का कोई पोर्टेबल तरीका है?

Answer 1

इस lib https://github.com/PixelsCommander/Download-File-JS आज़माएं, यह पहले से वर्णित सभी समाधानों से अधिक आधुनिक है क्योंकि "डाउनलोड" विशेषता का उपयोग करता है और सर्वोत्तम संभव अनुभव लाने के तरीकों के संयोजन का उपयोग करता है।

यहां बताई गई है - http://pixelscommander.com/en/javascript/javascript-file-downliading-ignore-content-type/

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

Answer 2

मैं पृष्ठ पर एक अदृश्य आईफ्रेम बनाने का सुझाव देता हूं और सर्वर से प्राप्त यूआरएल के लिए यह स्रोत सेट करता हूं - डाउनलोड पृष्ठ रीलोडिंग के बिना शुरू होगा।

या आप वर्तमान दस्तावेज़.location.href को यूआरएल पता प्राप्त करने के लिए बस सेट कर सकते हैं। लेकिन अगर अनुरोधित दस्तावेज़ वास्तव में मौजूद नहीं है तो उपयोगकर्ता को त्रुटि देखने का कारण हो सकता है।

Answer 3

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

यदि आपको वास्तव में अंतिम डाउनलोड लिंक प्राप्त करने के लिए अजाक्स कॉल करने की आवश्यकता है, तो पृष्ठ में डायनामिक रूप से डाउनलोड लिंक (AJAX प्रतिक्रिया से) लिखने के लिए डीएचटीएम का उपयोग करने के बारे में क्या है? इस तरह उपयोगकर्ता या तो अपने ब्राउज़र में डाउनलोड (यदि बाइनरी) या देखने के लिए क्लिक कर सकता है - या डिस्क पर सहेजने के लिए लिंक पर "इस रूप में सहेजें" का चयन करें। यह एक अतिरिक्त क्लिक है, लेकिन उपयोगकर्ता के पास अधिक नियंत्रण है।

Answer 4

मैं पॉपअप विंडो खोलने के लिए window.open() का सुझाव दूंगा। यदि यह एक डाउनलोड है, तो कोई खिड़की नहीं होगी और आपको अपनी फाइल मिल जाएगी। यदि कोई 404 या कुछ है, तो उपयोगकर्ता इसे एक नई विंडो में देखेगा (इसलिए, उनके काम को परेशान नहीं किया जाएगा, लेकिन उन्हें अभी भी एक त्रुटि संदेश मिलेगा)।

Answer 5

यदि यह अपने सर्वर आवेदन तो मैं निम्नलिखित हैडर उपयोग करने का सुझाव

Content-disposition: attachment; filename=fname.ext 

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

Answer 6

बस अपने जावास्क्रिप्ट से window.location.href = new_url फोन और यह कि यूआरएल के रूप में उपयोगकर्ता द्वारा लिखा गया था कि पता पट्टी

Answer 7

में हम इसे उस तरह से करने के लिए ब्राउज़र रीडायरेक्ट करेगा: सबसे पहले इस स्क्रिप्ट जोड़ें।

<script type="text/javascript"> 
function populateIframe(id,path) 
{ 
    var ifrm = document.getElementById(id); 
    ifrm.src = "download.php?path="+path; 
} 
</script> 

इस जहाँ आप डाउनलोड बटन चाहते प्लेस (यहाँ हम सिर्फ एक लिंक का उपयोग करें):

<iframe id="frame1" style="display:none"></iframe> 
<a href="javascript:populateIframe('frame1','<?php echo $path; ?>')">download</a> 

फ़ाइल 'download.php' (अपने सर्वर पर डाल करने की आवश्यकता है) बस में शामिल हैं:

<?php 
    header("Content-Type: application/octet-stream"); 
    header("Content-Disposition: attachment; filename=".$_GET['path']); 
    readfile($_GET['path']); 
?> 

तो जब आप लिंक पर क्लिक करें, छिपा iframe तो हो जाता है/sourcefile 'download.php' खुल जाता है। पैरामीटर के रूप में पथ के साथ। हमें लगता है कि यह सबसे अच्छा समाधान है!

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

Answer 8

मैं एक खुला स्रोत jQuery File Download plugin (Demo with examples) (GitHub) जो भी अपनी स्थिति के साथ मदद कर सकता है बनाया है जिसमें इसका मतलब है कि। यह एक आईफ्रेम के साथ समान रूप से काम करता है लेकिन इसमें कुछ शानदार विशेषताएं हैं जिन्हें मैंने काफी आसान पाया है:

• उपयोगकर्ता कभी भी उसी पृष्ठ को छोड़ देता है जिस पर उन्होंने फ़ाइल डाउनलोड शुरू की है। यह सुविधा आधुनिक वेब ऐप्लिकेशन के लिए महत्वपूर्ण
• परीक्षण पार ब्राउज़र समर्थन होता जा रहा है (मोबाइल सहित!)
• यह पोस्ट का समर्थन करता है और एक तरह से jQuery के AJAX API
• successCallback और failCallback कार्यों आप होने के लिए अनुमति देने के लिए समान में अनुरोध प्राप्त उपयोगकर्ता किसी भी स्थिति में क्या देखता है इसके बारे में स्पष्ट
• jQuery UI के संयोजन के साथ एक डेवलपर आसानी से उपयोगकर्ता को यह बताते हुए एक मॉडल दिखा सकता है कि फ़ाइल डाउनलोड हो रहा है, डाउनलोड शुरू होने के बाद मोडल को तोड़ें या उपयोगकर्ता को दोस्ताना तरीके से सूचित करें कि एक त्रुटि हुई है। इस के उदाहरण के लिए डेमो देखें।

Answer 9

उत्तर पढ़ना - स्वीकृत एक सहित मैं सीधे जीईटी के माध्यम से रीडफाइल पर पथ पारित करने के सुरक्षा प्रभावों को इंगित करना चाहता हूं।

यह कुछ करने के लिए स्पष्ट लग सकता है, लेकिन कुछ बस कॉपी/इस कोड को हो सकता है:

<?php 
    header("Content-Type: application/octet-stream"); 
    header("Content-Disposition: attachment; filename=".$_GET['path']); 
    readfile($_GET['path']); 
?> 

तो अगर मैं की तरह कुछ '/ path// fileWithSecrets करने के लिए' इस स्क्रिप्ट को पारित क्या होता है? दी गई स्क्रिप्ट खुशी से किसी भी फाइल को भेज देगा जो वेबसर्वर-उपयोगकर्ता तक पहुंच है। How do I make sure a file path is within a given subdirectory?

Answer 10

क्यों आप सर्वर साइड सामान बना रहे हैं जब आप सभी की जरूरत अलग window.location.href करने के लिए ब्राउज़र पुनर्निर्देशित करना होता है:

जानकारी कैसे इसे रोकने के लिए के लिए इस चर्चा को देखें? ?

यहाँ कोड है कि पार्स फ़ाइल = QueryString (taken from this question) और 1 सेकंड में उस पते पर रीडायरेक्ट (यहां तक ​​कि एंड्रॉयड ब्राउज़रों पर मेरे लिए काम करता है):

<script type="text/javascript"> 
    var urlParams; 
    (window.onpopstate = function() { 
     var match, 
     pl = /\+/g, // Regex for replacing addition symbol with a space 
     search = /([^&=]+)=?([^&]*)/g, 
     decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); }, 
     query = window.location.search.substring(1); 

     urlParams = {}; 
     while (match = search.exec(query)) 
      urlParams[decode(match[1])] = decode(match[2]); 
    })(); 

    (window.onload = function() { 
     var path = urlParams["file"]; 
     setTimeout(function() { document.location.href = path; }, 1000); 
    }); 
</script> 

आप निश्चित रूप से अपनी परियोजना में jQuery है, तो उन विंडो को हटाएं। onpopstate & विंडो। हैंडलर लोड करें और $ (दस्तावेज़) में सब कुछ करें .ready (function() {});

Answer 11

शीर्ष-वोट वाले उत्तर में सुरक्षा दोष के आसपास पहुंचने के लिए, आप सीधे इच्छित फ़ाइल (ifmediate php फ़ाइल के बजाय) पर iframe src सेट कर सकते हैं और हेडर जानकारी को एक में सेट कर सकते हैं।htaccess फ़ाइल:

<Files *.apk> 
    ForceType application/force-download 
    Header set Content-Disposition attachment 
    Header set Content-Type application/vnd.android.package-archive 
    Header set Content-Transfer-Encoding binary 
</Files> 

Answer 12

शीर्ष उत्तर के संबंध में मेरे पास सुरक्षा जोखिम का एक संभावित समाधान है। (डाउनलोड करने की मैं डाउनलोड फ़ाइल एक रास्ते में एक फ़ोल्डर ऊपर फ़ाइल से परीक्षण किया)

<?php 
    if(isset($_GET['path'])){ 
     if(in_array($_GET['path'], glob("*/*.*"))){ 
      header("Content-Type: application/octet-stream"); 
      header("Content-Disposition: attachment; filename=".$_GET['path']); 
      readfile($_GET['path']); 
     } 
    } 
?> 

ग्लोब() फ़ंक्शन का उपयोग करते हुए मैं फ़ाइलों की एक त्वरित सरणी है कि "अनुमति" कर रहे हैं बनाने के लिए कर रहा था डाउनलोड किया जा करने के लिए और इसके खिलाफ पारित पथ की जांच की। न केवल यह बीमा करता है कि फ़ाइल को पकड़ लिया जा रहा है कुछ संवेदनशील नहीं है बल्कि एक ही समय में फाइल अस्तित्व पर जांच करता है।

~ नोट: जावास्क्रिप्ट/HTML ~

HTML:

<iframe id="download" style="display:none"></iframe> 

और

<input type="submit" value="Download" onclick="ChangeSource('document_path');return false;"> 

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

<script type="text/javascript"> 
    <!-- 
     function ChangeSource(path){ 
      document.getElementByID('download').src = 'path_to_php?path=' + document_path; 
     } 
    --> 
</script>