ブログ   うい・らぶ・だいびんぐ   Cube 別館   flag_uk 英語サイト   ポータル
twitter Twitter でログイン
ホーム   最新ニュース   フォーラム   ダウンロード   写真集   リンク集   お問い合わせ RSS

SmartSection > Tools > JavaScript > ファイルアップロード中の表示

ファイルアップロード中の表示

投稿者: Ken 掲載日: 2009-11-26 (8675 回閲覧)
機能

JavaScript コード
ファイルアップロード・フォームの submit ボタンを押したら、
「スピンアイコン」と「uploading...」が表示される

コード

index.html

<html>
<head>
<title>File Upload</title>
<script type="text/javascript"><!--
function uploading(){
	document.getElementById('uploading').style.display = 'block';
	document.getElementById('form').style.display      = 'none';
}
//--></script>
<style type="text/css"><!--
#uploading{
	display:none;
}
//--></style>
</head>
<body>
<div id="uploading">
<img src="spinner.gif" alt="uploading"/>
uploading...
</div>
<div id="form">
<h3>File upload with spinner</h3>
<form enctype="multipart/form-data" action="target.php" method="POST" onsubmit="uploading();">
<input type="file" name="file1" ><br/>
<input type="submit" value="Upload" >
</form>
</div>
</body>
</html>


target.php

<?php
if (  isset($_FILES["file1"]["tmp_name"]) && is_file($_FILES["file1"]["tmp_name"]) ) {
	unlink( $_FILES["file1"]["tmp_name"] );
	echo "File uploaded : ".$_FILES["file1"]["name"];
} else {
	echo "File upload failed ";
}
?>


デモ

File upload with spinner

参考

- 「アップロード中です」というメッセージを出す

ページ移動
Ajax.Request と OPTIONS method 次の記事
投票者の合計: 0
平均: 0
投稿された内容の著作権はコメントの投稿者に帰属します。
スポンサー

寄付
配布しているソフトが気に入ったら、寄付をお願いします。
寄付

PageRank のページ毎の表示
http://linux.ohwada.jp/ modules/smartsection/item.php?
PageRank 0 PageRank

メインメニュー

マニュアル

ログイン