2023年1月27日 星期五

Dropzone.js讓網站上拖移文件變得相當容易

 Dropzone.js官方網站：Dropzone.js

範例一：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/min/dropzone.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/dropzone.min.css">
  </head>
  <body>
	<form action="/file-upload" method="post" enctype="multipart/form-data">
	  <input type="file" name="file" />
	</form>
  </body>
</html>

執行結果：
選取檔案前

選取檔案後

範例二：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<html>
	<head>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/min/dropzone.min.js"></script>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/dropzone.min.css">
		<script>
		  Dropzone.options.myGreatDropzone = { // camelized version of the `id`
			paramName: "file", // The name that will be used to transfer the file
			autoProcessQueue: false,
			addRemoveLinks: true,			
			maxFilesize: 2, // MB
		  };
		</script>
	</head>
	<body>
		<form action="/target" class="dropzone" id="my-great-dropzone"></form>
	</body>
</html>

執行結果：
拖移檔案前

拖移檔案後


刪除檔案後



張貼者： 於
標籤： , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)