JavaScript?? ?? API ??

JavaScript? File API? ???? ???? ?? ??? ????? ??? ??? ?? ??? ? ????. ? API? ?? ???, ???? ?? ???? ??? ?? ??? ???? ??????? ???? ? ?? ?????.

1. ?? API? ?? ??

?? API?? ?? ??? ???? ?? ?? ?????? ???? ????.

• ??: ?? ??? ???? ??, ??, ??? ?? ??? ?????.
• FileList: File ??? ???? ?????.
• FileReader: ?? ??? ?????? ????.
• Blob(Binary Large Object): ??? ? ? ?? ??? ?? ???? ?????.

2. ? ???? ??? ???

??? ?????? ?? ??? ??? ??.

?:

<input type="file">




<hr>

<h3>
  
  
  <strong>3. Reading Files with FileReader</strong>
</h3>

<p>The FileReader API allows reading the contents of files as text, data URLs, or binary data.  </p>

<h4>
  
  
  <strong>Methods of FileReader</strong>:
</h4>

<ul>
<li>
readAsText(file): Reads the file as a text string.
</li>
<li>
readAsDataURL(file): Reads the file and encodes it as a Base64 data URL.
</li>
<li>
readAsArrayBuffer(file): Reads the file as raw binary data.</li>
</ul>

<h4>
  
  
  <strong>Example: Reading File Content as Text</strong>
</h4>



<pre class="brush:php;toolbar:false"><input type="file">



<h4>
  
  
  <strong>Example: Displaying an Image Preview</strong>
</h4>



<pre class="brush:php;toolbar:false"><input type="file">




<hr>

<h3>
  
  
  <strong>4. Drag-and-Drop File Uploads</strong>
</h3>

<p>Drag-and-drop functionality enhances the user experience for file uploads.</p>

<p><strong>Example:</strong><br>
</p>

<pre class="brush:php;toolbar:false"><div>




<hr>

<h3>
  
  
  <strong>5. Creating and Downloading Files</strong>
</h3>

<p>JavaScript allows creating and downloading files directly in the browser using Blob and URL.createObjectURL.  </p>

<p><strong>Example: Creating a Text File for Download</strong><br>
</p>

<pre class="brush:php;toolbar:false"><button>




<hr>

<h3>
  
  
  <strong>6. File Validation</strong>
</h3>

<p>Before processing a file, it's important to validate its type, size, or other properties.  </p>

<p><strong>Example:</strong> Validate File Type and Size<br>
</p>

<pre class="brush:php;toolbar:false">const fileInput = document.getElementById("fileInput");

fileInput.addEventListener("change", event => {
  const file = event.target.files[0];
  const allowedTypes = ["image/jpeg", "image/png"];
  const maxSize = 2 * 1024 * 1024; // 2 MB

  if (!allowedTypes.includes(file.type)) {
    console.error("Invalid file type!");
  } else if (file.size > maxSize) {
    console.error("File size exceeds 2 MB!");
  } else {
    console.log("File is valid.");
  }
});

7. ???? ???

?? API? ?? ?? ?????? ?????. ??? Blob ? ??? ? ??? ?? ?? ?? ???? ?? ????? ?? ?? ???? ??? ? ????.

8. ?? ??

1. ?? ??? ??: ???? ?? ?? ?? ??? ??? ?????.
2. ??? ?? ??: ??? ? ?? ?? ???? ?? ???? ???.
3. ?? ??: ????? ??? ?? ? ??? ????.
4. ?? ???: ???? ?? ???? readAsArrayBuffer? ?????.

9. ?? API ?? ??

• ?? ??? ????(???, ??? ?).
• ?????? CSV ?? ??? ??? ?????.
• ??? ? ?? ?? ???.
• ???? ??? ?? ??(?: ???, ??)

10. ??

JavaScript? ?? API? ?? ? ??? ?? ?? ??? ??? ? ?? ???? ?????. ? API? ?? ???? ??? ?????? ???? ????? ??? ?? ??? ???? ?? ???? ???? ??? ??? ?? ? ????.

?????. ?? Abhay Singh Kathayat???!
?? ?????? ??? ?? ??? ?? ?? ??? ?? ??? ??????. ?? ????? ?? ???? ??? ???? ??????? ???? ?? ??? ????? ??? ?????? ???? ?????.
? ???? ???(kaashshorts28@gmail.com)? ???? ?????.

? ??? JavaScript? ?? API ?????: ? ??????? ?? ???? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!