Clemens Schwaighofer
32455459da
A simple javascript powered file uploader with progress and hooks support. Was created as a loose replacement for FineUploader. Currently only works with local uploads Below is the log history from the previous folder: ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ commit 6ea59f91314be8b2b936920d4b0a3f04932c9e73 ┃ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┻━ Author: Clemens Schwaighofer <clemens.schwaighofer@egplusww.com> Date: Thu Jun 3 10:31:54 2021 +0900 AJAX file uploader code clean up Add global abort and connected clean up of function calls and element show/hide blocks Add simple progress bar for upload (in connection with percent upload) Move running AFUS object into the config object Added new config object entries for this: - abort: flagged true if global abort is triggered - running: moved from AFUS_running into config, how many uploads are currently running - current: current file_pos running (that is queue position in array) - current_xhr: current XHR upload object, used for abort calls ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ commit b061008ca0b496f6157b8f073d7ca14abb469ef5 ┃ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┻━ Author: Clemens Schwaighofer <clemens.schwaighofer@egplusww.com> Date: Thu May 27 11:51:47 2021 +0900 Update AJAX file uploader to work sequential Rewrite flow in ajax uploader to use promsies to launch a new upload only if the previous upload was finished (in any way) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ commit a2ec369a8cae65e216fe402ac8b5d106e3db99af ┃ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┻━ Author: Clemens Schwaighofer <clemens.schwaighofer@egplusww.com> Date: Thu May 20 11:48:38 2021 +0900 Updated ajax simple file uploader to allow multiple file uploads ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ commit 66878f89c82fe914031e113e780fd72e9ff09b78 ┃ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┻━ Author: Clemens Schwaighofer <clemens.schwaighofer@egplusww.com> Date: Mon May 10 09:13:25 2021 +0900 Excel vendor sub module, ajax delay test, ajax file upload fix, others ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ commit e4efbbfdf843d8b2e53e4d3c873799b839875721 ┃ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┻━ Author: Clemens Schwaighofer <clemens.schwaighofer@egplusww.com> Date: Fri Apr 9 13:44:28 2021 +0900 ajax file upload updates, byte format test fixes, ssh2 test fixes, array append test add, nested array recursive walk test add ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ commit 88734ebaf7420a704a538f0a923ce6996b0b5237 ┃ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┻━ Author: Clemens Schwaighofer <clemens.schwaighofer@egplusww.com> Date: Mon Jan 25 17:15:14 2021 +0900 Add ajax uploader on error external function call Like post success uploaded, this function is called on any "non success" return falue. Passes on the full returned ajax data object ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ commit 2098fe53d510c03f291eaa5c4b2aefd60c24448e ┃ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┻━ Author: Clemens Schwaighofer <clemens.schwaighofer@egplusww.com> Date: Wed Jan 13 06:29:20 2021 +0900 Add additional parameters method parameter Added on init of form, when submitted before additional external form parameters function is called ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ commit 0c2211e2312abf368c4151dbdf54d4fa96a121dc ┃ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┻━ Author: Clemens Schwaighofer <clemens.schwaighofer@egplusww.com> Date: Tue Jan 12 10:09:42 2021 +0900 AJAX File uploader change for external function call. External functions are passed into the uploader as parameters. With this we can have unique functions for each init ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ commit c1eb15e30df319db1d5104bc5e4ab0cd8bb7cc8c ┃ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┻━ Author: Clemens Schwaighofer <clemens.schwaighofer@egplusww.com> Date: Fri Jan 8 09:59:33 2021 +0900 AJAX file uploader target action router value dynamic setting update, other test php files updates and additions ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ commit 429af6db892d6968ad87a3db662f3ff1a9d74270 ┃ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┻━ Author: Clemens Schwaighofer <clemens.schwaighofer@egplusww.com> Date: Thu Nov 5 11:33:30 2020 +0900 AJAX file uploader test code Simple single file AJAX file uploader with backend code sample. Work in progress with open - better, simpler frontend code insert part - multiple file upload - flag auto handling zip files (or tar, etc) - make it not rely on Jquery at all
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>
|