4,062 views
この記事は最終更新から 2630日 が経過しています。
1. やりたいこと
(60) Ajaxでファイルをアップロード の
「3. 応用」－「(1) submit時には画像をアップロードしない。」－「1)案その1」
を実装してみたい。
2. やってみる
一応期待通りの動作をしている。
※garbage collectionは未実装
しかし…
もっとスマートな実現方法があるはずだ…
実装例はこちら。
https://www.dogrow.net/hp/sample/00061/
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="./style.css" /> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script type="text/javascript" src="./script.js"></script> </head> <body> <input type="file" name="upfile"> <div id="upimg"></div> <form action="./viewimg.php" method="post"> <input type="submit" value="決定"> </form> </body> </html>
style.css
@charset "utf-8";
div#upimg img{
width: 200px;
}
script.js
$(function(){
$.ajaxSetup({
cache: false
});
// ファイル選択時に起動
$(document).on('change','input[name="upfile"]',function(){
// 選択されたファイル名を取得
var fpath = $(this).val();
if(fpath !== ''){
var formData = new FormData();
formData.append('file', $(this).prop('files')[0]);
// Ajax起動
$.ajax({
type: "POST",
url: "./putfile.php",
cache : false,
dataType : "text",
data : formData,
processData : false,
contentType : false,
timeout: 10000
}).done(function(data) {
// 成功時の処理
var disp = "<b>ERROR</b>";
if(data != ''){
disp = '<img src="' + data + '">';
}
$('#upimg').html(disp);
}).fail(function(){
// 失敗時の処理
window.alert("ERROR: Can't upload data.");
});
}
});
});
putfile.php
<?
session_start();
$ret = '';
// ファイルアップロードあり？
if(FALSE === isset($_FILES['file']['tmp_name'])){
goto tagEND;
}
// ファイル名あり？
if('' == $_FILES['file']['tmp_name']){
goto tagEND;
}
$fpath_src = $_FILES['file']['tmp_name'];
// 画像ファイル？（PNG or JPEG）
$imgInfo = getImageSize($fpath_src);
if(FALSE === $imgInfo){
goto tagEND;
}
switch($imgInfo[2]){
case IMAGETYPE_JPEG:
case IMAGETYPE_PNG:
break;
default:
goto tagEND;
}
// カレントディレクトリに画像をコピー
$fpath_dst = $_FILES['file']['name'];
move_uploaded_file($fpath_src, $fpath_dst);
$_SESSION['UPFILE'] = $fpath_dst;
$ret = $fpath_dst;
tagEND:
// 結果出力
echo $ret;
viewimg.php
<?
session_start();
$disp = '';
if(TRUE === isset($_SESSION['UPFILE'])){
$disp = "<img src='{$_SESSION['UPFILE']}'>";
}
echo <<< EOM
<!DOCTYPE html>
<html>
<head></head>
<body>{$disp}</body>
</html>
EOM;
アクセス数（直近7日）: ※試験運用中、BOT除外簡易実装済2025-12-09: 0回 2025-12-08: 1回 2025-12-07: 3回 2025-12-06: 1回 2025-12-05: 0回 2025-12-04: 1回 2025-12-03: 1回