使用jquery.form异步提交文件和其它参数

duansamve

已于 2022-09-09 06:08:36 修改

阅读量444

点赞数

分类专栏： jquery 文章标签： jquery javascript 前端

于 2020-07-02 22:32:32 首次发布

本文链接：https://blog.youkuaiyun.com/duansamve/article/details/107094706

版权

jquery 专栏收录该内容

37 篇文章

订阅专栏

本文介绍如何使用HTML和jQuery实现文件上传功能，并在上传文件的同时提交其他参数。文章详细展示了表单HTML结构、引入jQuery.form插件、设置Ajax上传配置及成功和错误回调处理，最后给出清除file输入框中文件名的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 = "";