πŸ”” Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A jQuery plugin used to enhance the native file input that features custom styles, icons and allows to limit the size/extension/aspect-ratio of an file you want to upload.

file-input uploader upload

Documentation

jquery.babypaunch.ezfile.js

  • jqueryλ₯Ό μ΄μš©ν•œ file 관리 plugin
  • λΌμ΄μ„ΌμŠ€: MIT
  • sample: ezfile.html

Install js file & Usage

1. jquery에 μ’…μ†μ μ΄λ―€λ‘œ λ°˜λ“œμ‹œ jquery 파일의 μ•„λž˜μ— jquery.babypaunch.ezfile.js νŒŒμΌμ„ μœ„μΉ˜μ‹œμΌœμ•Ό ν•œλ‹€.

Example

<html> <head> 	<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> 	<script src="./jquery.babypaunch.ezfile.js"></script> 	<script> 		$(function(){ 			$("#file1").ezfile({name: "upfile1"}); 			$("#file2").ezfile({name: "upfile2", limit: 0}); 			$("#file3").ezfile({name: "upfile3", ext: ["gif", "jpg", "jpeg", "png"], size: [900, 300, true]}); 			$("#file4").ezfile({name: "upfile4", ext: "gif", ratio: [8, 2]}); 			$("#file5").ezfile({name: "upfile5", limit: 3, byte: "10mb"}); 		}); 	</script> </head> <body> 	<div id="file1"></div> 	<div id="file2"></div> 	<div id="file3"></div> 	<div id="file4"></div> 	<div id="file5"></div> </body> </html> 

ezfile(json) Method

  • 기본적으둜 json의 값쀑에 name은 ν•„μˆ˜λ‘œ 지정해주어야 ν•œλ‹€. μ΄λŠ” input[type=file] 객체의 name으둜 μ§€μ •λœλ‹€.
json μ„€λͺ…
text
input[type=file] 객체의 placeholder attribute의 κ°’μœΌλ‘œ μ§€μ •λœλ‹€.
limit
1. limitλ₯Ό μž…λ ₯ν•˜μ§€ μ•Šμ„ κ²½μš°μ—” ν•˜λ‚˜μ˜ file만 등둝할 수 μžˆλ‹€.

2. limitκ°€ 0이면 λ¬΄μ œν•œμœΌλ‘œ, 0이 μ•„λ‹Œ λ‹€λ₯Έ 숫자이면 정해진 숫자만큼 file을 등둝할 수 μžˆλ‹€.
ext
1. μ—…λ‘œλ“œν•  수 μžˆλŠ” 파일의 ν™•μž₯자λͺ…을 μ§€μ •ν•œλ‹€. μ§€μ •λœ ν™•μž₯자λͺ…을 μ œμ™Έν•˜κ³  μ—…λ‘œλ“œν•  수 μ—†λ‹€.

2. ν™•μž₯자λͺ…은 λ°°μ—΄λ‘œ λ‹€μˆ˜ 등둝할 수 있고, λ¬Έμžμ—΄λ‘œλŠ” ν•˜λ‚˜λ§Œ 등둝할 수 μžˆλ‹€.
size
1. μ—…λ‘œλ“œν•  μ΄λ―Έμ§€μ˜ ν—ˆμš©ν•  κ°€λ‘œ/μ„Έλ‘œ ν”½μ…€ μ‚¬μ΄μ¦ˆλ₯Ό 지정할 수 μžˆλ‹€.

2. λ°°μ—΄μˆœμ„œλŒ€λ‘œ κ°€λ‘œ, μ„Έλ‘œ, μ΄ν•˜ μ‚¬μ΄μ¦ˆ ν—ˆμš© μ—¬λΆ€λ₯Ό μž…λ ₯ν•œλ‹€. 특히 μ΄ν•˜ μ‚¬μ΄μ¦ˆ ν—ˆμš© μ—¬λΆ€λŠ” 값을 μ§€μ •ν•˜μ§€ μ•Šμ„ 경우 κ°€λ‘œ, μ„Έλ‘œκ°€ μ •ν™•νžˆ μΌμΉ˜ν•΄μ•Ό μ—…λ‘œλ“œ ν•  수 μžˆλ‹€.
ratio
1. μ—…λ‘œλ“œν•  μ΄λ―Έμ§€μ˜ ν—ˆμš©ν•  κ°€λ‘œ/μ„Έλ‘œ ν”½μ…€ λΉ„μœ¨μ„ 지정할 수 μžˆλ‹€.

2. λΉ„μœ¨μ΄ 맞으면 μ‚¬μ΄μ¦ˆλŠ” 상관없이 μ²˜λ¦¬ν•  수 μžˆλ‹€.
byte
1. μ—…λ‘œλ“œν•  파일의 μš©λŸ‰μ„ μ œν•œν•  수 μžˆλ‹€. μ œν•œν•  μš©λŸ‰μ˜ μˆ«μžμ™€ λ‹¨μœ„λ₯Ό μž…λ ₯ν•΄μ„œ μ‚¬μš©ν•œλ‹€.

2. μ œν•œ μš©λŸ‰ λ‹¨μœ„λŠ” byte둜 k(b), m(b), g(b), t(b), p(b)λ₯Ό μ‚¬μš©ν•  수 있고, 각각 kilo, mega, giga, tera, petaλ₯Ό μ˜λ―Έν•œλ‹€.

You May Also Like