php(view)(index2.php)
1 2<!DOCTYPE html> 3<html> 4 <head> 5 <meta charset="utf-8"> 6 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 7 <style media="screen"> 8 li{ 9 list-style: none; 10 } 11 </style> 12 <script type="text/javascript"> 13 $(function(){ 14 var $fileList = $('#file_list'); 15 $fileList 16 //削除がクリックされた場合の処理 17 .on('click.deleteFile', '.delete_btn', function(){ 18 var $li = $(this).closest('.each_file'); 19 $li.remove(); 20 //inputタグ数が4つ未満になった場合に再度表示させる処理 21 var $fileListLI = $('#file_list li input[name=img_file]'); 22 var inputFileNum = $fileListLI.length; 23 //最後のinputタグを表示する処理 24 var lastInputFile = $fileListLI.eq(-1); 25 if (inputFileNum < 4){ 26 $(lastInputFile).show(); 27 } 28 return false; 29 }) 30 31 $fileList 32 //inputタグに画像が追加された場合の処理 33 .on('change.inputFile', '.input_file', function(e){ 34 var $input = $(this), 35 $li = $input.closest('.each_file'), 36 $newLi = $li.clone(); 37 $fileList.append($newLi); 38 //サムネイル画像を表示する処理 39 var file = e.target.files[0], 40 fileName = file.name; 41 //FileReaderオブジェクトの生成 42 reader = new FileReader(); 43 reader.readAsDataURL(file); 44 45 reader.onloadend = function(){ 46 var fileReader = this; 47 if(fileReader.result){ 48 var thumb = '<div class = "thumbnail"><img src = "' + fileReader.result + '" width = "150px" style = "max-width: 150px;">' + fileName + '<button class = "delete_btn">削除</button></div>'; 49 $li.append(thumb); 50 } 51 return this; 52 }; 53 $input.hide(); 54 55 //画像が3つになった場合にinputタグを非表示にする処理 56 //上にも同じコードがあるのでまとめた方がいいのですが... 57 var $fileListLI = $('#file_list li input[name=img_file]'); 58 var inputFileNum = $fileListLI.length; 59 var lastInputFile = $fileListLI.eq(-1); 60 if (inputFileNum == 4){ 61 $(lastInputFile).hide(); 62 } 63 64 //Ajaxで飛ばすdata(FromDataオブジェクト)を生成する処理 65 var fd = new FormData(); 66 //最後から2番目のinputタグを拾う処理 67 //画像が選択されるinputタグは必ず最後から2番目 68 var targetFile = $fileListLI.eq(-2); 69 //1画像毎のUPなので[0]、複数である場合は[1][2]... 70 fd.append( "file", $(targetFile).prop("files")[0]); 71 72 $.ajax({ 73 url: './view/practice/file_api2.php', 74 type: 'post', 75 dataType: 'json', 76 data: fd, 77 processData: false, 78 contentType: false 79 }) 80 .done(function(res){ 81 console.log(res); 82 }) 83 .fail(function(jqXHR, statusText, errorThrown){ 84 console.log(errorThrown); 85 }); 86 return this; 87 }); 88 }); 89 90 </script> 91 <title>Ajax Sample</title> 92 </head> 93 <body> 94 <h1>Ajax sample</h1> 95 <form action="?action=upload" method="post" enctype="multipart/form-data"> 96 <ul id="file_list"> 97 <li class="each_file"> 98 <input type="file" id="up_file" class="input_file" name="upfile" value="" accept="image/*"> 99 </li> 100 </ul> 101 <input type="submit" id="submit_btn" value="画像アップロード"> 102 </form> 103 </body> 104</html> 105
php(api)(file_api2.php)
1 2<?php 3 date_default_timezone_set('Asia/Tokyo'); 4 header("Content-type: text/json; charset=UTF-8"); 5 //直接のページ遷移を阻止 6 $request = isset($_SERVER['HTTP_X_REQUESTED_WITH']) ? strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) : ''; 7 if($request !== 'xmlhttprequest') exit; 8 //画像の拡張子を取得 9 $file_ext = pathinfo($_FILES['file']['name']); 10 $time = date("YmdHis"); 11 //ファイル名を日付に変更 12 $file_name = $time.".".$file_ext[extension]; 13 //保存先のパス 14 //index.php file_api.phpと同層にupload_fileディレクトリが存在 15 $file_path = "upload_file/".$file_name; 16 17 $tmp_file = $_FILES['file']['tmp_name']; 18 $result = move_uploaded_file($tmp_file, $file_path); 19 //保存出来たらファイル名をjsonで返す 20 if($result){ 21 echo json_encode($file_name); 22 } 23?> 24
php(コントローラー)
1<?php 2 3require_once __DIR__ . '/../system/photon/photon.php'; 4require_once __DIR__ . '/../system/common.php'; 5ini_set('display_errors', 0); 6 7function action_index2($data) 8{ 9 render('view/practice/index2.php', $data); 10} 11 12function action_upload($data) 13{ 14 var_dump($data); 15 die; 16} 17 18?>
input type=textだと
コントローラー側の関数にそのname属性が引数のキー値となり、textの中身が渡ってきてくれます。
action_uploadという関数に送りたくてそこへのパスはこれで正しいのですが、ファイル名が渡ってくれないです
なので、ファイル名を取得してさらにhiddenのtextとかに格納できたらいいのかなとか思ってるのですが、難しくてできません(T_T)
よろしくお願いします
photonというライブラリを使ってます
回答1件
あなたの回答
tips
プレビュー