Ajax ファイルのアップロードと削除

環境：Laravel5、JQuery

jsファイル

$(function(){

	//ファイルのアップロード
	$('#files').on("change",function(){
        // ファイル情報を取得
        var files = this.files;
        // FormDataオブジェクトを用意
        var fd = new FormData();
        // ファイルの個数を取得
        var filesLength = files.length;
        // ファイル情報を追加
        for (var i = 0; i < filesLength; i++) {
            fd.append("files[]", files[i]);
        }

       $.ajax({
			//GET,POST,PUT,DELETEなど
			type: 'POST',
			url: '/form/upload',
            data: fd,
            dataType:'json',
            processData: false,
            contentType: false,
            //laravelトークン対策
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
		}).done(function(data,textStatus,jqXHR){
			for(i=0;i<data.length;i++){
				$('#file_list').append('<p id="file'+i+'"><span>'+data[i]+'</span><input type="hidden" name="attchmnt[]" value="'+data[i]+'"> <input type="button" value="削除"></p>');
				delfile(i);
			}
			$('#files').remove();
			alert('ファイルをアップロードしました。');
		}).fail(function(jqXHR,textStatus,errorThrown){
			//失敗時処理
			alert('ファイルのアップロードに失敗しました。');
		}).always(function(jqXHR,textStatus){
			//共通処理
		});
	});

	//ファイルの削除
	function delfile(i){
	$(document).on(
		"click",
		"#file"+i,
		function(){
			var filename=$('#file'+i+' span').text();
			$.ajax({
				type:"POST",
				url:"/form/delfile",
				data:{
					'delfile':filename
				},
				//laravelトークン対策
	            headers: {
	                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
	            }
			}).done(function(data,textStatus,jqXHR){
				$('#file'+i).remove();
				if(!$('#file_list p').length){
					$('form').append('<input type="file" name="files" id="files" multiple="multiple">');
				}
				alert('ファイルを削除しました。');
			}).fail(function(jqXHR,textStatus,errorThrown){
				//失敗時処理
				alert('ファイルの削除に失敗しました。');
			}).always(function(jqXHR,textStatus){
				//共通処理
			});

		}
	);
	}

});

htmlファイル

<html>
<head>
<title>Laravel</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link href='//fonts.googleapis.com/css?family=Lato:100' rel='stylesheet'
	type='text/css'>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapi.com/ajax/libs/jqueryui/1.10.4/i18n/jquery-ui-i18n.min.js"></script>
<script type="text/javascript" src="/js/form.js"></script>
<style>
</style>
</head>
<body>

	<h1>ファイルアップロード</h1>
	<div id="file_list">
	</div>
	<form action="" method="POST" enctype="multipart/form-data">
	<input type="file" name="files" id="files" multiple="multiple">
	</form>

</body>
</html>

print 'Hello World!';

hogehoge備忘録

Ajax ファイルのアップロードと削除