1,177 views
この記事は最終更新から 2365日 が経過しています。
1. やりたいこと
入力フォームで画像ファイルを選択したとき、submit前にサムネイル画像化して表示したい。
2. やってみる
実装例はこちら。
https://www.dogrow.net/hp/sample/00060/
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> </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
<?
$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);
$ret = $fpath_dst;
tagEND:
// 結果出力
echo $ret;
3. 応用
(1) submit時には画像をアップロードしない。
1) 案その1
・<input type=”file”> を <form> ～ </form> の外に書く。
・事前にアップロード済みのファイル名は Session情報に保存しておく。
・Submitされずに残ってしまった画像に対して要garbage collection
2) 案その2
・<form> で enctype=”multipart/form-data” を指定しない。→ ファイルは送信されず。
どうするのが正しいのだろうか…