1. 程式人生 > 實用技巧 >使用jquery.form非同步提交檔案

使用jquery.form非同步提交檔案

html:

				<form id="recovery-secret-key-modal-form" class="form-horizontal" action="">
					<div class="modal-body">
						<div class="form-group row">
							<label
								class="col-sm-3 col-md-3 col-lg-3 col-xl-3 control-label font-normal align-left modal-label-word">賬號:</label>
							<div class="col-sm-9 col-md-9 col-lg-9 col-xl-9">
								<input class="form-control" type="text" placeholder=""
									id="recovery-secret-key-modal-account" name="recoverySecretKeyModalAccount"
									disabled />
							</div>
						</div>

						<div class="form-group row">
							<label
								class="col-sm-3 col-md-3 col-lg-3 col-xl-3 control-label font-normal align-left modal-label-word">金鑰檔案:</label>
							<div class="col-sm-9 col-md-9 col-lg-9 col-xl-9">
								<div class="file-input-container">
									<input class="form-control file-input" type="file" placeholder=""
										id="recovery-secret-key-modal-file" name="updatePkg" />
								</div>
							</div>
						</div>
					</div>
				</form>

js:

首先引入jquery.form-3.45.0.js檔案。

			$('#recovery-secret-key-modal-form').ajaxSubmit({
				url: "/api/v1/kmj/keymng/import/",
				type: "post",
				data: {"uid": $("#recovery-secret-key-modal-account").val(), "usertype": "user"},
				enctype: 'multipart/form-data',
				// iframe: true,
				dataType: 'json',
				success(data) {
					if (Number(data.status) === 0) {
						toastr.success(data.msg, "成功提示");
						$("#recovery-secret-key-modal").modal("hide");

						let orgTreeObj = $.fn.zTree.getZTreeObj("org-tree");
						let selectedNodes = orgTreeObj.getSelectedNodes();
						getUserTableData(selectedNodes[0].did);
					} else {
						toastr.error(data.msg, "錯誤提示");
					}
				},
				error(data) {
					toastr.error("網路錯誤,恢復金鑰失敗!", "錯誤提示");
				}
			})

以上程式碼在提交檔案流的時候提交其它引數。

選擇檔案後怎麼清空file檔案框的檔名?

document.getElementById('recovery-secret-key-modal-file').value = "";