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




file file-upload (5)

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

( 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>

पाठ के रूप में पढ़ने के लिए ... uncomment //fr.readAsText(file); लाइन और टिप्पणी fr.readAsDataURL(file);

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

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

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

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

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

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

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

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

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


आप 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;
    }   

    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 {
      file = input.files[0];
      fr = new FileReader();
      fr.onload = receivedText;
      //fr.readAsText(file);
      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>

एचटीएमएल:

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

jQuery:

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

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


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

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

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


 <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>




html-input