/************************************************************* グローバル変数 *************************************************************/ 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.attr('src', e.target.result); img.css('width', '300px'); $('#selectedimg').append(img); // ウィンドウの追加 var line; if(sel_line==0){ line = $(''); }else if(sel_line==1){ line = $(''); }else if(sel_line==2){ line = $(''); } var win = $(''); 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 = $("