109 lines
5.3 KiB
HTML
109 lines
5.3 KiB
HTML
|
<!doctype html>
|
||
|
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||
|
|
<head>
|
||
|
|
<title>AJAX File upload TEST</title>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||
|
|
<script src="jquery.min.js" type="text/javascript"></script>
|
||
|
|
<script defer src="edit.js" type="text/javascript"></script>
|
||
|
|
<script defer src="other.js" type="text/javascript"></script>
|
||
|
|
<script defer src="../src/ajaxFileUploadSimple.js" type="text/javascript"></script>
|
||
|
|
<link rel=stylesheet type="text/css" href="other.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<form method="post" name="formdata" id="formdata" enctype="multipart/form-data" action="backend.php">
|
||
|
|
<div id="alerts-div" class="hide"></div>
|
||
|
|
<div id="container">
|
||
|
|
<!-- uploader block: START -->
|
||
|
|
<div id="first_upload-input">
|
||
|
|
<!--
|
||
|
|
The following element must be present
|
||
|
|
<name>-input: MASTER DIV, holds all below
|
||
|
|
<name>-file-div: upload button
|
||
|
|
maks-<name>: nested in above div, hold -info and -file (inside <name>-file-div)
|
||
|
|
<name>-info: Button name + layout block (inside <name>-file-div > mask-<name>)
|
||
|
|
<name>-file: file upload input (inside <name>-file-div > mask-<name>)
|
||
|
|
<name>-submit-div: submit input element for submit call
|
||
|
|
<name>-submit: submit button (inside <name>-submit-div)
|
||
|
|
<name>-upload-status: div field for progress of upload/info
|
||
|
|
<name>-clear-div: reset/clear the upload-status list
|
||
|
|
<name>-clear: button for clear upload queue (inside <name>-clear-div)
|
||
|
|
-->
|
||
|
|
<!-- main upload file pointer -->
|
||
|
|
<div id="first_upload-file-div" class="file-upload mg-30">
|
||
|
|
<!-- upload label must be present -->
|
||
|
|
<label id="mask-first_upload" for="first_upload-file">
|
||
|
|
<div id="first_upload-info">ファイル選ぶ</div>
|
||
|
|
<!-- main file control container -->
|
||
|
|
<input id="first_upload-file" name="first_upload-file" type="file" class="file-upload-input" style="display:none;" multiple>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div id="first_upload-submit-div" class="mg-30" style="display:none;">
|
||
|
|
<!-- the actual upload, must have id set -->
|
||
|
|
<button type="submit" value="アップロード" id="first_upload-submit" name="first_upload-submit" class="submitBtn">アップロード</button>
|
||
|
|
</div>
|
||
|
|
<!-- all status blocks go here -->
|
||
|
|
<div id="first_upload-upload-status" style="display:none;"></div>
|
||
|
|
<!-- clear entries from the upload-status list -->
|
||
|
|
<div id="first_upload-clear-div" class="mg-10" style="display:none;">
|
||
|
|
<button type="button" value="クリア" id="first_upload-clear" name="first_upload-clear">クリア</button>
|
||
|
|
</div>
|
||
|
|
<div id="first_upload-abort-all-div" class="mg-10" style="display:none;">
|
||
|
|
<button type="button" value="クリア" id="first_upload-abort-all" name="first_upload-abort-all">全部キャンセル</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- uploader block: END -->
|
||
|
|
|
||
|
|
<!-- OTHER UPLOAD BLOCK single -->
|
||
|
|
<div id="second_upload-input">
|
||
|
|
<div id="second_upload-file-div" class="mg-30">
|
||
|
|
<label id="mask-second_upload" for="second_upload-file">
|
||
|
|
<div id="second_upload-info" style="border: 2px solid red; font-size: 20px; width: 10%; margin: 10px; padding: 10px; text-align: center;">Choose A</div>
|
||
|
|
<input id="second_upload-file" name="second_upload-file" type="file" style="display:none;" multiple>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div id="second_upload-submit-div" class="mg-30" style="display:none;">
|
||
|
|
<button type="submit" value="Upload A" id="second_upload-submit" name="second_upload-submit" class="">Upload A</button>
|
||
|
|
</div>
|
||
|
|
<div id="second_upload-upload-status" style="display:none;"></div>
|
||
|
|
<div id="second_upload-clear-div" class="mg-10" style="display:none;">
|
||
|
|
<button type="button" value="Clear A" id="second_upload-clear" name="second_upload-clear">Clear A</button>
|
||
|
|
</div>
|
||
|
|
<div id="second_upload-abort-all-div" class="mg-10" style="display:none;">
|
||
|
|
<button type="button" value="クリア" id="second_upload-abort-all" name="second_upload-abort-all">Abort all</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- OTHER UPLOAD BLOCK unlimited -->
|
||
|
|
<div id="third_upload-input">
|
||
|
|
<div id="third_upload-file-div" class="mg-30">
|
||
|
|
<label id="mask-third_upload" for="third_upload-file">
|
||
|
|
<div id="third_upload-info" style="border: 2px solid red; font-size: 20px; width: 10%; margin: 10px; padding: 10px; text-align: center;">Choose B</div>
|
||
|
|
<input id="third_upload-file" name="third_upload-file" type="file" style="display:none;" multiple>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div id="third_upload-submit-div" class="mg-30" style="display:none;">
|
||
|
|
<button type="submit" value="Upload B" id="third_upload-submit" name="third_upload-submit" class="">Upload B</button>
|
||
|
|
</div>
|
||
|
|
<div id="third_upload-upload-status" style="display:none;"></div>
|
||
|
|
<div id="third_upload-clear-div" class="mg-10" style="display:none;">
|
||
|
|
<button type="button" value="Clear B" id="third_upload-clear" name="third_upload-clear">Clear B</button>
|
||
|
|
</div>
|
||
|
|
<div id="third_upload-abort-all-div" class="mg-10" style="display:none;">
|
||
|
|
<button type="button" value="クリア" id="third_upload-abort-all" name="third_upload-abort-all">Abort all</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- previously uploaded list -->
|
||
|
|
<div id="uploaded" class="uploaded">
|
||
|
|
<div class="title">Previous uploaded</div>
|
||
|
|
<div id="file-info"></div>
|
||
|
|
<div id="file-list"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<input type="hidden" name="reference-id" id="reference-id" value="">
|
||
|
|
<div id="indicator" class="hide"></div>
|
||
|
|
<div id="overlayBox" class="overlayBoxElement hide"></div>
|
||
|
|
</form>
|
||
|
|
</body>
|
||
|
|
</html>
|