[ create a new paste ] login | about

Link: http://codepad.org/yenqduU3    [ raw code | fork ]

C, pasted on Jun 3:
/*************************************************************
 グローバル変数
 *************************************************************/
 
 var can_push = true;
 var sel_line = 0;
 
 
 /*************************************************************
 [初期動作] 画像/CSSを読込んだタイミング
 *************************************************************/

$(window).load(function () {
	$('#selectline').hide();
	$('#selectline img').eq(0).css("border", "2px solid #4385bf");
});

/*************************************************************
 [初期動作] DOMがロードされて操作・解析が可能になったタイミング
 *************************************************************/

$(document).ready(function(){
	// アップロードボタン押下
	$('#upload').click(function() {
		$('#file').click();
	});
	
	$('#submitdiv').click(function(e) {
	    gose();
	});
	
	$('#selectline img').click(function() {
		console.log($('#selectline img').index(this));
		$(this).css("border", "2px solid #4385bf");
		$(this).siblings().css("border", "2px solid #000000");
		
		sel_line = $('#selectline img').index(this);
		if(sel_line==0){
			$('.line').attr("src", "./img/material/transparent.png");
			ga('send', 'event', 'button', 'line_none');
		}else if(sel_line==1){
			$('.line').attr("src", "./img/material/black_s.png");
			ga('send', 'event', 'button', 'line_black');
		}else if(sel_line==2){
			$('.line').attr("src", "./img/material/white_s.png");
			ga('send', 'event', 'button', 'line_white');
		}
	});
	
	(function preventKeyBoardSubmit(){
	    // スマホで決定ボタンをおした時にformがsubmitされるのを防ぐ。キーボードを閉じる挙動で代替させる。
	    $('#windowtxt').on('keypress', (e) => {
	        if(e.keyCode === 13){
	            e.preventDefault();
	
	            // 現在フォーカスしている入力欄からフォーカスを外すことで、キーボードを強制的に閉じる
	            document.activeElement.blur();
	            $('#windowtxt').blur();
	        }
	    });
	})();

});

		
$(document).on('change','input[name="file"]',function()
{
	if ($("input[name='file']").val()!== '')
	{
		// 入力ファイルの取得
		var uploadfile =  $("input[name='file']").prop("files")[0];
		
		// jpg判定
		if ( uploadfile.type != 'image/jpg' && uploadfile.type != 'image/jpeg'){
			alert("ERROR: jpgを選択して下さい: "+uploadfile.type+")");
			$("input[name='filebtn']").val("");
			return;
		}
		
		// ファイルサイズ判定
		if( 1024*1024*16 < uploadfile.size ){
			alert("ERROR: ファイルサイズが大きすぎます: "+uploadfile.size+")");
			$("input[name='filebtn']").val("");
			return;
		}
		
		// サムネイルの表示
		fr = new FileReader();
		fr.onload = function(e) {
			$('#selectedimg').empty();
			var imgPreloader = new Image();
			imgPreloader.onload=function() {
				// 画像ロード後の処理
				var w = imgPreloader.width;
				var h = imgPreloader.height;
				var img = $('<img>');
				img.attr('src', e.target.result);
				img.css('width', '300px');
				$('#selectedimg').append(img);
				// ウィンドウの追加
				var line;
				if(sel_line==0){
					line = $('<img src="./img/material/transparent.png">');
				}else if(sel_line==1){
					line = $('<img src="./img/material/black_s.png">');
				}else if(sel_line==2){
					line = $('<img src="./img/material/white_s.png">');
				}
				var win = $('<img src="./img/material/window_pos.png">');
				line.css({position:"absolute", left:"0px", top:"0px", width:"300px", height:h*300/w+"px"});
				line.addClass("line");
				win.css({position:"absolute", left:"12px", bottom:"18px"});
				$('#selectedimg').append(line).append(win);
			}
			imgPreloader.src = e.target.result;
		};
		fr.readAsDataURL(uploadfile);
		
		// GA
		ga('send', 'event', 'button', 'select_photo');
		
		// 効果線選択ボタンの表示
		$('#selectline').show();
				
	}else{
		console.log("nofile");
		return;
	}
});


function gose(){
	// 連打防止
	if(can_push == false){
		return;
	}
	
	// 画像が選ばれていない時
	if ($("input[name='file']").val()=== '')
	{
		alert("画像を選択して下さい");
		return;
	}
	
	// ボタンを押せなくする
	can_push = false;
	$("#submitdiv").css("background-color", "#777777");
	
	// 表示リセット
	$("#results").empty();
	
	// 入力ファイルの取得
	var uploadfile =  $("input[name='file']").prop("files")[0];
	
	// テキストの取得
	var txt = $("#windowtxt").val().substr(0, 23);
	if(txt.length == 0){
		txt = "ボトルスライムが あらわれた!";
	}
	
	// GA
	ga('send', 'event', 'button', 'gosei');
	
	// ajax送信
	var fd = new FormData();
	fd.append("file", uploadfile);
	fd.append("txt", txt);
	fd.append("line", String(sel_line));
	
	// ajax通信
	$.ajax({
		url: "./post.php", 
		type : "POST",
		async : true,
		dataType : "text",
		data : fd,
		processData : false,
		contentType : false,
		beforeSend: function(xhr){
			// ファイルのアップロード直前の処理(プログレス表示の用意)
			$("#filebtn").css("display", "none");
			$("#progress").css("display", "block");
			$("#per").text("0%");
			$("#status").text("アップロード中...");
		},
		xhr : function(){
			XHR = $.ajaxSettings.xhr();
			if(XHR.upload){
				XHR.upload.addEventListener('progress',function(e)
				{
					//  プログレス表示
					progre = parseInt(e.loaded/e.total*10000)/100;
					//console.log(progre);
					$("#bar").css({width: progre*3+"px"});
					if(progre==100){
						$("#bar").css({width: "300px"});
						$("#status").text("合成中...");
					}
				}, false); 
			}
			return XHR;
	    }
	})
	.done(function(text)
	{
		// アップロードした画像の追加
		var json = JSON.parse(text);
		if(json.error == "")
		{
			// アップロード成功時の処理
			console.log(json.msg);
			// サムネイルの表示
			var div = $("<div class='tmb'>");
			var img = $('<img src="data:image/png;base64,'+json.data+'">');
			div.append(img);
			$("#results").append(div);
			$('html,body').animate({ scrollTop: window.innerHeight }, 'fast');
			$("#status").text("");
		}
		else
		{
			// phpエラー表示
			alert(json.error);
		}
		// 合成ボタンを押せるようにする・プログレスバーのリセット
		can_push = true;
		$("#submitdiv").css("background-color", "#4385bf");
		$("#bar").css({width: "0px"});
	});
}


Create a new paste based on this one


Comments: