https://revobookstore.com/js/file-drag-drop.js

1/**
2 * お問合せ・お見積りフォームで使用
3 */
4$(function() {
5	// ファイルアップロードのクラスの変更
6	photoUploadClassChange();
7
8	$(document).on("change", "#fileInput", function(e) {
9		$.each(e.target.files, function(index,val){
10			fileUpload(val);
11		});
12
13		$(this).val('');
14	});
15
16	let objId = "#drag-drop-area";
17	let obj = $(objId);
18
19	$(document).on("dragover", "body", function(e) {
20		e.preventDefault();
21	});
22	// body draglave
23	$(document).on("dragleave", "body", function(e) {
24		e.preventDefault();
25	});
26	// imagefield dragover
27	$(document).on("dragover", objId , function(e) {
28		e.preventDefault();
29		$("div.photoupload").addClass("hover");
30	});
31	// imagefield dragleave
32	$(document).on("dragleave", objId , function(e) {
33		e.preventDefault();
34		$("div.photoupload").removeClass("hover");
35	});
36	// imagefield drop
37	$(document).on("drop", objId , function(e) {
38		e.preventDefault();
39		$("div.photoupload").removeClass("hover");
40		let files = e.originalEvent.dataTransfer.files;
41
42		// ファイルが1つ以上選択されている場合は処理しない
43		let fileUpCount = 0;
44		for (let i = 1; i <= attachmentMaxNum; i++) {
45			if ($('input[name="attachment' + i + '"]').val() != ''){
46				fileUpCount++;
47			}
48		}
49		if(fileUpCount > attachmentMaxNum){
50			alert("アップロードに失敗しました。\r\nアップロード出来るファイルは"+attachmentMaxNum+"つまでです。");
51		}else{
52			if( files.length > attachmentMaxNum){
53				alert("アップロード出来るファイルは"+attachmentMaxNum+"つまでです。");
54			}else{
55				// ファイルの内容は FileReader で読み込み
56				for (let i = 0; i < files.length; i++){
57					let file = files[i];
58					// ファイルをajaxでアップして画面にセットする
59					fileUpload(file);
60				}
61			}
62		}
63	});
64
65	/**
66	 * ファイルアップロードの共通処理
67	 * @param file
68	 */
69	function fileUpload(file){
70		if(parseInt(file.size) > maxFileSize){
71			alert("「" + file.name + "」のアップロードに失敗しました。\r\nアップロード出来るファイルは" + maxFileSize/1000000 + "MBまでです。");
72			return;
73		}
74
75		let fileReader = new FileReader();
76		fileReader.onload = function(event) {
77			let fd = new FormData();
78			let blob = new Blob([event.target.result],{"type":file.type});
79
80			let attachment_directory = '';
81
82			if($('input[name="attachment_directory"]').val()){
83				attachment_directory = $('input[name="attachment_directory"]').val();
84			}else{
85				let chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
86				for ( let i = 0; i < 16; i++ ) {
87					attachment_directory += chars.charAt(Math.floor(Math.random() * chars.length));
88				}
89				$('input[name="attachment_directory"]').val(attachment_directory);
90			}
91
92			fd.append("upfile", blob, file.name);
93			fd.append("upfile", file.name);
94			fd.append("file_upload_token" , fileUploadToken);
95			fd.append("attachment_directory" , attachment_directory);
96
97			$.ajax({
98				url:fileUploadUrl,
99				type:"post",
100				data:fd,
101				dataType:"json",
102				processData: false,
103				contentType: false,
104			}).done(function(data, textStatus, jqXHR){
105
106				if(data.status == 'NG'){
107					alert("「" + file.name + "」のアップロードに失敗しました。" + data.errorMessage);
108					return;
109				}
110
111				// ファイルが３つ以上選択されている場合は処理しない
112				let inputFileName = '';
113				let inputFileNo = '';
114				for (let i = 1; i <= attachmentMaxNum; i++) {
115					if ($('input[name="attachment' + i + '_name"]').val() == ''){
116						inputFileName = "attachment" + i;
117						inputFileNo = i
118						break;
119					}
120				}
121
122				if(inputFileName != ''){
123					// hiddenにセット
124					$('input[name="' + inputFileName + '"]').val(data.tmpFileName);
125					$('input[name="' + inputFileName + '_name"]').val(data.files.upfile.name);
126					$('input[name="' + inputFileName + '_src"]').val(data.files.upfile.name);
127
128					let appendHtml = '';
129					appendHtml = appendHtml + '<li>';
130					if(data.files.upfile.type == 'image/jpeg' || data.files.upfile.type == 'image/gif') {
131						// 画像の場合はサムネイル
132						appendHtml = appendHtml + '<img src="' + data.tmpFilePath + '">';
133						$('input[name="' + inputFileName + '_src"]').val(data.tmpFilePath);
134
135					}else if(data.files.upfile.type == 'application/pdf'){
136						// PDFの場合はアイコン
137						let iconPdf = '/common_img/icon_pdf.png';
138						appendHtml = appendHtml + '<img src="' + iconPdf + '" alt="' + data.files.upfile.name + '">';
139						$('input[name="' + inputFileName + '_src"]').val(iconPdf);
140
141					}else if(data.files.upfile.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
142						|| data.files.upfile.type == 'application/vnd.ms-excel'){
143						// Excelの場合はアイコン
144						let iconExcel = '/common_img/icon_excel.png';
145						appendHtml = appendHtml + '<img src="' + iconExcel + '" alt="' + data.files.upfile.name + '">';
146						$('input[name="' + inputFileName + '_src"]').val(iconExcel);
147
148					}else if(data.files.upfile.type == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
149						|| data.files.upfile.type ==  'application/msword'){
150						// ワードの場合はアイコン
151						let iconWord = '/common_img/icon_word.png';
152						appendHtml = appendHtml + '<img src="' + iconWord + '" alt="' + data.files.upfile.name + '">';
153						$('input[name="' + inputFileName + '_src"]').val(iconWord);
154
155					}else if(data.files.upfile.type == 'text/plain'){
156						// テキストファイルの場合はアイコン
157						let iconText = '/common_img/icon_text.png';
158						appendHtml = appendHtml + '<img src="' + iconText + '" alt="' + data.files.upfile.name + '">';
159						$('input[name="' + inputFileName + '_src"]').val(iconText);
160					}
161					appendHtml = appendHtml + '<span id="attachment' + inputFileNo + '" class="delete-image"><i class="fa fa-times" aria-hidden="true"></i></span>';
162					appendHtml = appendHtml + '</li>';
163					$("div.upload-area ul").append(appendHtml);
164
165					// ファイルアップロードのクラスの変更
166					photoUploadClassChange();
167				}else{
168					alert("「" + file.name + "」のアップロードに失敗しました。\r\nアップロード出来るファイルは"+attachmentMaxNum+"つまでã

168§ã™ã€‚");
169				}
170			}).fail(function(jqXHR, textStatus, errorThrown){
171				alert("「" + file.name + "」のアップロードに失敗しました。");
172			});
173		}
174		fileReader.readAsArrayBuffer(file);
175
176	}
177
178	/**
179	 * ファイル削除ボタンクリック
180	 */
181
182	// アップ後
183	$(document).on("click", "div.upload-area ul li span", function(e) {
184		// ファイル削除の共通処理
185		targetIndex = $("div.upload-area ul li span").index($(this));
186		deleteFile(targetIndex);
187		// showDeleteModalWindow(targetIndex);
188		return false;
189	});
190
191	// リロード後
192	$("div.upload-area ul li span").click( function(e) {
193		// ファイル削除の共通処理
194		targetIndex = $("div.upload-area ul li span").index($(this));
195		console.log(targetIndex);
196		deleteFile(targetIndex);
197		// showDeleteModalWindow(targetIndex);
198		return false;
199	});
200
201	// 画像クリック時も削除
202	// アップ後
203	$(document).on("click", "div.upload-area ul li img", function(e) {
204		// ファイル削除の共通処理
205		targetIndex = $("div.upload-area ul li img").index($(this));
206		deleteFile(targetIndex);
207		// showDeleteModalWindow(targetIndex);
208		return false;
209	});
210
211	// リロード後
212	$("div.upload-area ul li img").click( function(e) {
213		// ファイル削除の共通処理
214		targetIndex = $("div.upload-area ul li img").index($(this));
215		deleteFile(targetIndex);
216		// showDeleteModalWindow(targetIndex);
217		return false;
218	});
219
220
221	/*
222	 * モーダルウィンドを閉じる挙動
223	 */
224	function closeDeleteModalWindow(){
225		$('.modal-overlay').hide();
226	}
227	$(document).on("click touchend",".modal-overlay",function () {
228		//closeDeleteModalWindow();
229	});
230
231	$(document).on("click touchend",".close-txt",function () {
232		closeDeleteModalWindow();
233	});
234
235	$(document).on("click touchend",".delete-txt",function () {
236		deleteFile($('p.delete-txt').attr("data-delete-img-index"));
237	});
238
239
240	function showDeleteModalWindow(targetIndex){
241		$('p.delete-txt').attr("data-delete-img-index",targetIndex);
242		$('.modal-overlay').show();
243
244	}
245
246	$(window).resize(function () {
247		let w = $(window).width();
248		let h = $(window).height();
249		let cw = $(".modal-contents").innerWidth();
250		let ch = $(".modal-contents").height();
251		let pxleft = cw / 2;
252		let pxtop = ((h - ch)/2);
253		$(".modal-contents").css({"margin-left": - pxleft + "px"});
254		$(".modal-contents").css({"top": pxtop + "px"});
255	});
256
257	/**
258	 * ファイル削除共通処理
259	 * @param e
260	 * @returns {boolean}
261	 */
262	function deleteFile( targetIndex){
263		if(window.confirm('このファイルを削除しますか？')){
264			let name = $("div.upload-area ul li span")[targetIndex].id;
265			// クリア
266			$('input[name="' + name + '"]').val('');
267			$('input[name="' + name + '_name"]').val('');
268			$('input[name="' + name + '_src"]').val('');
269			$("div.upload-area ul li")[targetIndex].remove();
270
271			// ファイルアップロードのクラスの変更
272			photoUploadClassChange();
273		}
274	}
275
276	/**
277	 * ファイルアップロードエリアのdivのクラスを変更
278	 * ファイルがアップされているかいないかでデザインが少し変わる
279	 */
280	function photoUploadClassChange(){
281		let fileUpFlag = false;
282		let fileUpCount = 0;
283		for (let i = 1; i <= attachmentMaxNum; i++) {
284			name = "attachment" + i;
285			if ($('input[name="' + name + '_name"]').val() != ''){
286				fileUpFlag = true;
287				fileUpCount++;
288			}
289		}
290
291		if(fileUpCount >= attachmentMaxNum){
292			$("div.dragarea").hide();
293		}else{
294			$("div.dragarea").show();
295		}
296		if(fileUpFlag){
297			$("div.photoupload").addClass('settled');
298		}else{
299			$("div.photoupload").removeClass('settled');
300		}
301		// ローディング画像非表示
302		$("p.loader").hide();
303
304	}
305
306});