JQuery এ ফাইল ইনপুট থেকে ডেটা পান

136

আমার কাছে আসলে একটি ফাইল ইনপুট রয়েছে এবং আমি ফাইলটির বেস 64 তথ্য পুনরুদ্ধার করতে চাই।

আমি চেষ্টা করেছিলাম:

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

তথ্য পুনরুদ্ধার করতে। তবে এটি কেবল নাম, দৈর্ঘ্য, সামগ্রী ধরণের সরবরাহ করে তবে ডেটা নিজেই দেয় না।

আমাজন এস 3 এ পাঠানোর জন্য আমার এই ডেটাগুলি আসলেই দরকার

আমি ইতিমধ্যে এপিআই পরীক্ষা করেছি এবং আমি যখন এনকোড টাইপ "মাল্টিপার্ট / ফর্ম-ডেটা" html ফর্মের মাধ্যমে ডেটা প্রেরণ করি এটি কাজ করে।

আমি এই প্লাগইনটি ব্যবহার করি: http://jasny.github.com/bootstrap/javascript.html# ফাইল ফাইল

এবং এই প্লাগইনগুলি আমাকে চিত্রের পূর্বরূপ দেয় এবং আমি চিত্র পূর্বরূপের src বৈশিষ্ট্যে ডেটা পুনরুদ্ধার করি। কিন্তু যখন আমি এস 3 এ এই ডেটা প্রেরণ করি তখন এটি কার্যকর হয় না। আমার সম্ভবত "মাল্টিপার্ট / ফর্ম-ডেটা" এর মতো ডেটা এনকোড করা দরকার তবে কেন তা আমি জানি না।

এইচটিএমএল ফর্ম ব্যবহার না করে এই ডেটাগুলি পুনরুদ্ধার করার কোনও উপায় আছে কি?

— kschaeffler
সূত্র

বিষয়বস্তুগুলির জন্য আপনাকে কিছু ফ্যাশনে এটি আপলোড করতে হবে (iframe, ajax, ফ্ল্যাশ, বা traditionalতিহ্যবাহী ফর্ম)।

— ব্র্যাড ক্রিস্টি

ফাইলটি প্রথমে সার্ভারে আপলোড করতে হবে।

— সোভেন ভ্যান জোলেন

3

অগত্যা নয়, যদি ব্রাউজারটি নতুন ফাইল এপিআই সমর্থন করে (দেখুন html5rocks.com/en/tutorials/file/dndfiles )

— devnull69

আমি আসলে jasny.github.com/bootstrap/javascript.html#fileupload এই প্লাগইনটি ব্যবহার করছি এবং আমি ফাইলটির পূর্বরূপ পেতে পারি যাতে ডেটা কোথাও থাকে।

— kschaeffler

সেক্ষেত্রে সার্ভারে "ডেটা" থাকবে। জাভাস্ক্রিপ্ট / jQuery এর মাধ্যমে অ্যাক্সেস করার আগে আপনাকে ক্লায়েন্ট (ব্রাউজার) এ ডেটা আউটপুট দিতে হবে

— devnull69

134

আপনি ফাইলরেডার এপিআই চেষ্টা করতে পারেন। এরকম কিছু করুন:

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

@kschaeffler fr.readAsDataURL (ফাইল) চেষ্টা করুন; এটি বেস 64 ডাটাটি পড়া ফাংশন, তবে আমি এটি এখনও পরীক্ষা করি নি।

— সার্ক

আসলে এই ফাংশনটি আমাকে পর্যাপ্ত পরিমাণে ডেটা দেয় না। jasny.github.com/bootstrap/javascript.html#fileupload প্লাগইনটিতে আমি পূর্বরূপ থেকে যা পেয়েছি তা ইতিমধ্যে। আমি মনে করি যে আমি যে ডেটা উদ্ধার করেছি তা বেস 64 এনকোডেড নয় এবং এটিই সমস্যা, তবে আমি নিশ্চিত নই

— kschaeffler

আমার প্রকৃত একই এনকোড ডেটা দরকার যা আমি পুনরুদ্ধার করি যখন আমি "মাল্টিপার্ট / ফর্ম-ডেটা" এনকোড টাইপ

— kschaeffler

155

ইনপুট ফাইল উপাদান:

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

নথিভুক্ত কর :

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

— Morilog
সূত্র

12

নিখুঁত সমাধান! ধন্যবাদ. একক আপলোড, সূচক 0. এর উন্নতি

— 23-18

দুর্দান্ত, আমার স্ক্রিপ্টটি কোনও ফর্ম জমা না দিয়ে ক্লাউডিনারি নিয়ে কাজ করেছে। টেনে আনুন, ছেড়ে দিন, আপলোড করুন :)

— অ্যান্ডি

এটাই আমার দরকার ছিল।

— আমেতে আশীর্বাদপ্রাপ্ত

দুর্দান্ত উত্তর !! তারপর আপনি সঙ্গে পরিবর্তনশীল স্থানান্তর করতে পারেন$('.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]);
});

ফাইলআরডার আপনার ফাইলটি লোড করবে এবং এতে আপনার কাছে বেস format64 fileReader.resultফর্ম্যাটে ফাইলের ডেটা রয়েছে (ফাইলের সামগ্রী-ধরণের (এমআইএমআই), পাঠ্য / প্লেইন, চিত্র / জেপিজি ইত্যাদি)

— কার্লোস বি ফ্ল্লোস
সূত্র

9

ফাইলের রিডার এপিআই, 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" />

উপরের ফাইলগুলি ডাউনলোড করুন ফাইল ইনপুট আপনার সূচী পৃষ্ঠার পথ জুড়ে।

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

— অমিত রানা
সূত্র