• JS
  • J볃교

DROPZONE.JS 와 JQUERY을 이용한 이미지 드래그 파일 업로드 소스

2018-11-26 154

설명

  • 카카오톡 링크

DROPZONE.JS 와 JQUERY을 이용한 이미지 드래그 파일 업로드 소스입니다.

소스실행 현황

소스보기( X표시가 나타나면 무시하셔도 됩니다! )

<script type="text/javascript" src="/js/dropzone.js"></script>
<style>
	#my-awesome-dropzone {width:100%; height:400px; background-image:url('/img/img_upload.png'); background-repeat:no-repeat; background-size:cover; background-position:center center; border:1px solid #e0e0e0}
	#my-awesome-dropzone.dz-drag-hover {background-image:url('/img/img_hover.png'); background-repeat:no-repeat; background-size:cover; background-position:center center; }
	.file_upload #dropZone {display:inline-block; width:100%; height:100%; background:red}
</style>
<form action="/file-upload" class="dropzone" id="my-awesome-dropzone" enctype="multipart/form-data">
	<div class="fallback">
		<input name="file" type="file" multiple />
	</div>
</form>

<script type="text/javascript">
	Dropzone.options.myAwesomeDropzone = {
		maxFiles: 1,
		addRemoveLinks: true,
		dictResponseError: 'Server not Configured',
		acceptedFiles: ".png,.jpg,.gif,.bmp,.jpeg",
		thumbnailWidth: 500,
		thumbnailHeight: 500,
		init:function(){
			var self = this;
			// config
			self.options.addRemoveLinks = true;
			self.options.dictRemoveFile = "Delete";
			//New file added
			self.on("maxfilesexceeded", function(file){
				this.removeAllFiles();
				this.addFile(file);
			});
		}
	};
</script>