JQuery में फ़ाइल इनपुट से डेटा प्राप्त करें

136

मेरे पास वास्तव में एक फ़ाइल इनपुट है और मैं फ़ाइल के बेस 64 डेटा को पुनः प्राप्त करना चाहूंगा।

मैंने कोशिश की:

$('input#myInput')[0].files[0]

डेटा पुनर्प्राप्त करने के लिए। लेकिन यह केवल नाम, लंबाई, सामग्री प्रकार प्रदान करता है, लेकिन डेटा ही नहीं।

मुझे वास्तव में अमेज़ॅन एस 3 को भेजने के लिए इन डेटा की आवश्यकता है

मैं पहले से ही एपीआई का परीक्षण करता हूं और जब मैं एनकोड प्रकार "मल्टीपार्ट / फॉर्म-डेटा" के साथ HTML फॉर्म के माध्यम से डेटा भेजता हूं तो यह काम करता है।

मैं इस प्लगइन का उपयोग करता हूं: http://jasny.github.com/bootstrap/javascript.html#fileupload

और यह प्लगइन्स मुझे चित्र का पूर्वावलोकन देता है और मैं छवि पूर्वावलोकन के src विशेषता में डेटा पुनर्प्राप्त करता हूं। लेकिन जब मैं इन डेटा को S3 में भेजता हूं तो यह काम नहीं करता है। मुझे शायद "मल्टीपार्ट / फॉर्म-डेटा" जैसे डेटा को एनकोड करना होगा, लेकिन मुझे नहीं पता कि क्यों।

क्या HTML फॉर्म का उपयोग किए बिना इन डेटा को पुनः प्राप्त करने का एक तरीका है?

— kschaeffler
स्रोत

सामग्री रखने के लिए आपको इसे कुछ फैशन (iframe, ajax, flash, या पारंपरिक रूप) में अपलोड करने की आवश्यकता होगी।

— ब्रैड क्रिस्टी

फ़ाइल को पहले सर्वर पर अपलोड किया जाना चाहिए।

— स्वेन वैन ज़ोलेन

3

जरूरी नहीं, अगर ब्राउज़र नई फाइल एपीआई ( html5rocks.com/en/tutorials/file/dndfiles देखें ) का समर्थन करता है

— devnull69

मैं वास्तव में इस प्लगइन का उपयोग कर रहा हूं jasny.github.com/bootstrap/javascript.html#fileupload और मैं फ़ाइल का पूर्वावलोकन प्राप्त कर सकता हूं ताकि डेटा कहीं हो।

— kschaeffler

उस स्थिति में "डेटा" सर्वर पर होगा। इससे पहले कि आप जावास्क्रिप्ट (jQuery

— devnull69

134

आप FileReader API आज़मा सकते हैं। कुछ इस तरह से करें:

<!DOCTYPE html>
<html>
  <head>
    <script>        
      function handleFileSelect()
      {               
        if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
          alert('The File APIs are not fully supported in this browser.');
          return;
        }   
      
        var input = document.getElementById('fileinput');
        if (!input) {
          alert("Um, couldn't find the fileinput element.");
        }
        else if (!input.files) {
          alert("This browser doesn't seem to support the `files` property of file inputs.");
        }
        else if (!input.files[0]) {
          alert("Please select a file before clicking 'Load'");               
        }
        else {
          var file = input.files[0];
          var fr = new FileReader();
          fr.onload = receivedText;
          //fr.readAsText(file);
          //fr.readAsBinaryString(file); //as bit work with base64 for example upload to server
          fr.readAsDataURL(file);
        }
      }
      
      function receivedText() {
        document.getElementById('editor').appendChild(document.createTextNode(fr.result));
      }           
      
    </script>
  </head>
  <body>
    <input type="file" id="fileinput"/>
    <input type='button' id='btnLoad' value='Load' onclick='handleFileSelect();' />
    <div id="editor"></div>
  </body>
</html>

स्निपेट का विस्तार करें

— सार्क
स्रोत

अरे, मैंने आपके समाधान की कोशिश की और वह काम करता है। मैंने जानकारी पुनः प्राप्त कर ली है लेकिन यह अच्छी तरह से एन्कोडेड नहीं है। एक फ़ाइल के लिए मुझे अपने चित्र के 3 पहले पात्रों के लिए \xc3\xbf\xc3यह एन्कोड करने के बजाय मिलता है \xff\xd8\xff। मुझे अपनी तस्वीर के लिए दूसरा एनकोड प्राप्त करने के लिए क्या उपयोग करना चाहिए?

— kschaeffler

@ ऑक्युफ़िशलर fr.readAsDataURL (फ़ाइल) आज़माएँ; यह Base64 डेटा पढ़ने वाला फ़ंक्शन है, लेकिन मैंने अभी तक इसका परीक्षण नहीं किया है।

— सार्क

वास्तव में यह फ़ंक्शन मुझे पर्याप्त डेटा नहीं देता है। यह पहले से ही मेरे पास है कि प्रीव्यू से जो मैं jasny.github.com/bootstrap/javascript.html#fileupload में उपयोग करता हूं। मुझे लगता है कि जो डेटा मैं पुनः प्राप्त करता हूं वह बेस 64 एनकोडेड नहीं है और यह समस्या है, लेकिन मुझे यकीन नहीं है

— ksipleffler

मुझे वास्तव में उसी एनकोड डेटा की आवश्यकता है जिसे मैं तब पुनः प्राप्त करता हूं जब मैं html फॉर्म के माध्यम से "मल्टीपार्ट / फॉर्म-डेटा" एनकोड प्रकार

— ksipleffler

156

इनपुट फ़ाइल तत्व:

<input type="file" id="fileinput" />

दस्तावेज लें :

var myFile = $('#fileinput').prop('files');

— Morilog
स्रोत

12

सही समाधान! धन्यवाद। एकल अपलोड के लिए सुधार, सूचकांक 0. var myFile = $ ('# fileinput')। प्रोप ('फाइलें') [0];

— पोलास

उत्कृष्ट, मेरी स्क्रिप्ट को फॉर्म सबमिट करने के बिना क्लाउडिनरी के साथ काम करना मिला। ड्रैग, ड्रॉप, अपलोड करें :)

— एंडी

ठीक वैसा ही जैसा मुझे चाहिए था।

— अमेट ने

बहुत बढ़िया जवाब !! आप तो साथ चर स्थानांतरित कर सकते हैं$('.myClass').prop('files', myFile );

— हमेशा एक शिक्षार्थी

54

मैंने एक फॉर्म डेटा ऑब्जेक्ट बनाया और फ़ाइल को संलग्न किया:

var form = new FormData(); 
form.append("video", $("#fileInput")[0].files[0]);

और मुझे मिल गया:

------WebKitFormBoundaryNczYRonipfsmaBOK
Content-Disposition: form-data; name="video"; filename="Wildlife.wmv"
Content-Type: video/x-ms-wmv

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

— mark.inman
स्रोत

37

एचटीएमएल:

<input type="file" name="input-file" id="input-file">

jQuery:

var fileToUpload = $('#input-file').prop('files')[0];

हम केवल पहला तत्व प्राप्त करना चाहते हैं, क्योंकि प्रोप ('फाइलें') सरणी देता है।

— cerbin
स्रोत

16

input तत्व, प्रकार का file

<input id="fileInput" type="file" />

अपने inputपरिवर्तन पर FileReaderऑब्जेक्ट का उपयोग करें और अपनी inputफ़ाइल संपत्ति पढ़ें :

$('#fileInput').on('change', function () {
    var fileReader = new FileReader();
    fileReader.onload = function () {
      var data = fileReader.result;  // data <-- in this var you have the file data in Base64 format
    };
    fileReader.readAsDataURL($('#fileInput').prop('files')[0]);
});

FileReader आपकी फ़ाइल को लोड करेगा और fileReader.resultआपके पास बेस 64 प्रारूप (फ़ाइल सामग्री-प्रकार (MIME), पाठ / सादे, छवि / jpg, आदि) में फ़ाइल डेटा होगा

— कार्लोस बी। फ्लोर्स
स्रोत

9

FileReader एपीआई jQuery के साथ, सरल उदाहरण।

( function ( $ ) {
	// Add click event handler to button
	$( '#load-file' ).click( function () {
		if ( ! window.FileReader ) {
			return alert( 'FileReader API is not supported by your browser.' );
		}
		var $i = $( '#file' ), // Put file input ID here
			input = $i[0]; // Getting the element from jQuery
		if ( input.files && input.files[0] ) {
			file = input.files[0]; // The file
			fr = new FileReader(); // FileReader instance
			fr.onload = function () {
				// Do stuff on onload, use fr.result for contents of file
				$( '#file-content' ).append( $( '<div/>' ).html( fr.result ) )
			};
			//fr.readAsText( file );
			fr.readAsDataURL( file );
		} else {
			// Handle errors here
			alert( "File not selected or browser incompatible." )
		}
	} );
} )( jQuery );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="file" />
<input type='button' id='load-file' value='Load'>
<div id="file-content"></div>

स्निपेट का विस्तार करें

पाठ के रूप में पढ़ने के लिए ... असहजता //fr.readAsText(file);रेखा और टिप्पणीfr.readAsDataURL(file);

— shramee
स्रोत

0

 <script src="~/fileupload/fileinput.min.js"></script>
 <link href="~/fileupload/fileinput.min.css" rel="stylesheet" />

Fileinput नाम की उपरोक्त फ़ाइलों को डाउनलोड करें, पथ को मैं आपके सूचकांक पृष्ठ में जोड़ता हूं।

<div class="col-sm-9 col-lg-5" style="margin: 0 0 0 8px;">
<input id="uploadFile1" name="file" type="file" class="file-loading"       
 `enter code here`accept=".pdf" multiple>
</div>

<script>
        $("#uploadFile1").fileinput({
            autoReplace: true,
            maxFileCount: 5
        });
</script>

— अमित राणा
स्रोत