ajax上传文件附带参数问题之 $(...).dialog is not a function

EasyUI文件上传实战:从filebox到FormData的完整踩坑指南 文件上传是后台管理系统开发中的高频需求,涉及前端组件选型、数据封装、网络请求与后端存储等多层技术。基于jQuery的EasyUI框架与FormData对象,开发者可以通过filebox组件选取文件,利用Ajax异步提交实现多功能上传。理解浏览器原生文件对象与multipart/form-data协议,是解决中文文件名、文件大小限制、超时重试等问题的关键。该方案适用于运维平台、数据导入、资源管理等业务场景。本文结合EasyUI文件上传实践,梳理了从表单封装到后端接收的完整链路与常见问题排查方法。 阅读详情

1、先引用两个包

jquery-1.8.0.min.js和ajaxfileupload.js

<script src="${ctx}/js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="${ctx}/js/ajaxfileupload.js" type="text/javascript"></script>


2、再上传文件(这里是上传excel)和附带的参数(id),

html

<form id="AnchorImportForm" method="post" enctype="multipart/form-data" ">
	<input type="hidden" id="pipeImportId" name="pipeImportId" value="${pipeImportId}"> 
		<div id="file_up" height="100" width="100%" style="margin-top:50px">
			 <input id="upfile" type="file" name="upfile" accept="xlsx"/>
		</div>
		<p></p>
		<input type="button" value="导入" style="text-align:center;background-color:#d9ffff;border:none;" onClick="File.upLoadFile()">
</form>

js

 File.upLoadFile=function(){
	 var id= document.getElementById("pipeImportId").value;
	$.ajaxFileUpload({
		 url: '${ctx}/sys/file/upLoadTwo',
		 secureuri:false,
        	 fileElementId: 'upfile',//上传文件的id
        	 dataType: 'json',
         	data: {
            	 "pipeId": id
        	 },
         	success:function(result){
        		try{
				if(result.success){
					$('#dialogDivImport').dialog('close');
				}
					$.messager.show({
						title:'提示',
						msg:result.msg
					});
			}catch(e){
				$.messager.alert("警告",result.msg);
			}
        	 }
	});
} 


然后就报错了... $(...).dialog is not a function


报这个错的原因之一就是引用冲突。我这里的

<script src="${ctx}/js/jquery-1.8.0.min.js" type="text/javascript"></script>
是冲突的,可能是外部已经引用了,在这里删除就OK了...



jQuery UI的Dialog无法提交问题的解决方法 具体表现为: 1.提交按钮失效,点击后无任何反应。 2.即便是使用其它手段使页面产生提交,服务器端也无法取到Dialog中的表单数据。 原因:JQuery会把Dialog的元素append到Body里面,而不是form里面。研究了页面源码后发现,jQuery UI Dialog控件初始化时动态生成的HTML元素被添加到页面的尾部、form元素的后面,而原始的Dialog模板部分(其内包含表单元素)也被移到了 动态生成的HTML元素内。也就是说,原先在form内的表单在Dialog初始化后就被移到form外了,这就导致了Dialog模板内表单全部失效。 第1种方法: 不知jQuery UI的Di 立即下载

相关推荐

jQuery UI Dialog控件中的表单无法正常提交的解决方法

研究了页面源码后发现,jQuery UI Dialog控件初始化时动态生成的HTML元素被添加到页面的尾部、form元素的后面,而原始的Dialog模板部分(其内包含表单元素)也被移到了 动态生成的HTML元素内。

使用jQuery dialog前端报错Uncaught TypeError: $(…).dialog is not a function,解决方法

正确引入js和css文件 <script type="text/javascript" src="js/jquery-3.5.1.js" ></script> <script src="js/jquery-3.5.1.min.js"></script> <script src="js/jquery-ui.min.js"></script> <script src="js/jquery-ui.js"></script

sinat_34524133的博客 5682

Java:使用Java调用打印机进行打印(JPG、PDF和Word三种文件格式)

目录 一、Java的打印简介 二、Java打印实现 2.1 JPG图片文件格式打印实现 2.2 PDF文件格式打印实现 2.3 Word文件格式打印实现 2.3.1 Word文件采用jacob插件进行打印实现。 2.3.2 先将word转化为pdf文件,然后打印pdf(lz使用) 三、总结 一、Java的打印简介 在我们的实际工作中,经常需要实现打印功能。但由于历史原因,Jav...

vatxiongxiaohui的专栏 8万+

报错:Uncaught TypeError: $(…).dialog is not a function,处理方法。

在写前端queryselfplan.js代码时运用  $.dialog({ type: 'alert', content: '该计划未创建' }); 报错:Uncaught TypeError: $(…).dialog is not a function 这时候查了很多资料,发现原因是jsp页面有css和js包没有导入,导包如下:

weixin_40125777的博客 1万+

傻白入门芯片设计,指令集架构、微架构、处理器内核(十一)

通俗理解指令集架构、微架构和处理器内核的关系

qq_46675545的博客 6008

Flink CDC 3.0 详解

Flink CDC 是基于数据库日志 CDC(Change Data Capture)技术的实时数据集成框架,支持全增量一体化、无锁读取、并行读取、表结构变更自动同步、分布式架构等高级特性。配合Flink 优秀的管道能力和丰富的上下游生态,Flink CDC 可以高效实现海量数据的实时集成。Flink CDC 于2023年12月7日重磅推出其全新的 3.0 版本,3.0版本的发布对 Flink CDC 而言具有里程碑的意义,自此 Flink CDC 从捕获数据变更的Flink 数据源正式迈向为以 Flink

奔跑的蜗牛的博客 2638

TypeError: $(...).dialog is not a function debug过程

当你的项目里有运用到bootstrap和jquery UI两个JS插件的时候,你就知道错了……二者在很多方面都会存在冲突,比如我遇到一个问题debug了很久,错误如下: TypeError: $(...).dialog is not a function 根据stackoverflow上的解释,都是说jquery.js重复。然而我找了半天,都没有发现我有重复的地方。后来突然想到,是不是jque

全名工作狂的小城堡 8407

Cursor Cloud Agent:云原生编程工作流的底层重构

编程工作流正从本地计算范式转向云原生执行范式。Cloud Agent 本质是将代码理解、生成、执行与调试等核心能力下沉至隔离、可控、按需分配的云端虚拟机,通过 Firecracker 微虚拟机实现亚秒级启动,并依托上下文快照、环境镜像化和内核级沙箱保障一致性、算力弹性与数据安全。这一范式突破了传统本地 AI 编程助手在环境依赖、调试能力与企业合规上的根本局限,使 IDE 从编辑工具升维为分布式开发指挥中心。本文深入解析其运行机制与工程落地实践。

weixin_34354173的博客 337

jQuery UI dialog插件出错信息:$(this).dialog is not a function及js引入重复解决办法

$(this).dialog is not a function js一直报这个错误 ,需要引用的js 插件 也全部引用 但还是报错 找了 好久 后来发现是一样的js 插件引入了两次 因为一个页面引入了另一个jsp  里面也有引用相同的js  删除重复的js插件

一窍不通只会复制粘贴的Java工程师 1万+

从零开始解析N-CMAPSS数据集:航空发动机健康管理的入门指南

本文详细解析了N-CMAPSS数据集在航空发动机健康管理中的应用,从数据集的构成、关键变量到实际数据分析方法,为初学者提供了全面的入门指南。通过Python代码示例,展示了如何加载、探索和建模这一复杂数据集,帮助读者掌握航空发动机性能预测的核心技术。

weixin_29063979的博客 319

【原创,解决CLodop安装后无法调用的问题】已经安装过CLodop,但是网页上仍然提示“clodop云打印服务(localhost本地)未安装启动,点击这里执行安装....”

在某些国内web网站中,需要安装一个名为“CLodop”的插件;但在实际使用过程中,即使安装了CLodop插件,网页试图调用它时还是会提示“clodop云打印服务(localhost本地)未安装启动,点击这里执行安装...”,且无法完成相关打印任务 本文属原创博客,分析了解决CLodop无法被调用的问题,并附上了原理和解决方法,本质上是和跨域请求以及CORS类安全组策略相关

link_in_csdn的博客 2万+

jqueryUI的dialog报错

jqueryUI的dialog报错 jQuery UI dialog插件出错信息$(this).dialog is not a function 试了很久,发现在当前页面上加载了jquery的js资源,在被load的那个页面中也加载了jquery的资源。 尝试将被load的页面中的jquery资源去除,错误便消除。

龙腾四海365的专栏 1542

大模型部署指南:LM Studio

本文介绍使用LM Studio部署大模型

举世誉之而不加劝,举世非之而不加沮,定乎内外之分,辩乎荣辱之境,斯已矣。 1951

$ is not defined、$.dialog() is not function、$(...).ajaxsubmit() is not function

今天用easyUI弹一个dialog在用ajax提交表单,因为字段过多,所以要进行封装,所以就想到了jquery的ajaxsubmit提交。 首先报错为$ is not defined 这是因为jquery.js没有引用,但查一下引用了,后来发现前面引用的js文件用了jquery.js框架,原来是没有第一个引用,后来把它放到第一 之后又报$.dialog() is not function,首

熊浪的博客 5084

基于MATLAB实现语音信号MFCC特征提取(附完整代码)

你有没有想过你的智能手机是如何理解语音指令的?或者 Alexa 和 Siri 等语音助手如何处理您的命令?这种卓越能力背后的机制在很大程度上归功于一种称为 Mel 频率倒谱系数 (MFCC) 的方法。语音识别技术允许机器解释人类语音,将口语转换为计算机可以操纵的格式。这项技术对于开发交互式和响应式 AI 至关重要,例如声控助手、自动化客户服务系统和实时翻译服务。MFCC 代表 Mel 频率倒谱系数。这是用于自动语音和说话人识别的功能。

baidu_34971492的博客 1313

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

通过jquery dialog为什么提交不了form表单 和 $("#Form").ajaxSubmit(options) is not a function 的原因

1.jquery dialog为什么提交不了form表单  $("#dialog").dialog({                 autoOpen: false,                 height: 500,                 width: 800,                 modal: true,                 butt

异度空间 3212

pscad IEEE标准系统搭建说明

pscad IEEE标准系统搭建说明,包含典型的IEEE 9节点、14节点、30节点、39节点和118节点系统。内含标准测试系统的原始数据和潮流结果。

dialog弹框总结

$(function(){ var api = $.dialog({ id: 'msg', title: '消息提醒', /*content: '初始化函数执行前窗口的内容', init: function(){ alert('正在执行初始化函数,此时你可看到窗口内容没有发生变化');

zpz_326的博客 5690

lwip-2.0.3

lwip是瑞典计算机科学院(SICS)的Adam Dunkels 开发的一个小型开源的TCP/IP协议栈。实现的重点是在保持TCP协议主要功能的基础上减少对RAM 的占用。

artdialog ajax,artDialog v6 iframe 跨域请求

在iframe中,打开dialog加载子页面。思路:父页面打开dialog,在子页面中写提交,获取当前dialog进行后续操作。父页面拿到子页面表单,在父页面提交,直接操作dialog完成后续动作。问题:子页面拿不到当前dialog。 文档中写道,父页面用 top.dialog()打开对话框,子页面用top.dialog.get(window)。父页面中top.dialog is not a fu...

weixin_29518761的博客 413

复用jquery的ajax调用模块

每次都写一堆.ajax,真的很麻烦。因此封装在一个模块中比较好。第一,ajax调用出错时,自动弹出错误对话框,对话框使用的artDialog。第二,提供基本的post,get简单调用方式。参数有限,适合就好。第三,支持中英文。下面是我的代码,大家可以自己扩充:(function (window, document, undefined) { "use strict"; window.ajaxC

Dean Chen的专栏 5234

jQuery的ajax获取数据渲染页面

一、ajax的请求方式 post $.ajax({ //请求方式 type:'POST', //发送请求的地址 url:'xxxxxx', //服务器返回的数据类型 dataType:'json', //发送到服务器的数据,对象必须为key/value的格式,jquery会自动转换为字符串格式 data:{key1:value1,key2:...

p_hao的博客 2万+

jquery ui dialog弹出窗 清空缓存Cache或强制刷新

我用jquery ui 弹出一个购物车的对话,通过AJAX加载的数据。发现购物车被缓存,一直看到是旧数据。为了刷新购物车更新,我必须去加一个刷新按钮,点击后更新购物车页面。有没有一种方法来自动刷新加载到对话框的内容? 我在加载使用下面的代码内容: function loadCart() { $('#dialog').load('...url to cart page...');...

aidang8943的博客 722

jQuery UI全教程之一(dialog的使用教程)

jQueryUI目前的版本已经更新到了1.8.7。个人感觉和easyui相比起来,jQueryUI在界面的美观程度和可定制型更强一些。所以再次将一些jQueryUI组件的用法说明一下,方便日后查阅。也方面没接触jQueryUI的人能早日使用jQueryUI套件 (一)首先来说jQueryUI使用频率较高dialog组件: dialog就是我们常说的弹出层,应用还是比较广泛的,比如:...

web开发自学 316

jquery easyui 的dialog 方法关闭事件

easyui dialog 打开/关闭 事件   当用户打开/关闭一个dialog窗体时,对应的事件获取方法如下: $('#dialogDiv').dialog({ onClose:function(){ alert('dlg closed'); }, onOpen:function(){ alert('dlg Open')...

De_Moivre的专栏 1660

ajax loadend,jquery - Modal Forms - AjaxStart and End - .load and .ajax() calls - Stack Overflow

I am working on an .NET MVC 3 project where I have made all the form based views load in a modal dialog using jQuery.All of my views are loaded using ajax throughout the project.I have a jQuery functi...

weixin_30670859的博客 230

ckeditor 自己写的一个简单的image上传js 运用iframe的ajax上传

ckeditor最近修改一个上传的,原来的Image的上传插件功能很多,但是自己用,没有必要,就进行了修改,后来就改成了目前的样子,根据_samples/api_dialog.html 进行了修改,把页面里面的调用都进行了修改. 1.添加网址和上传在一个tab中 2.图片上传之后会直接把生成的值放到图片网址的input中。 1.index.html调用页面   Index....

weixin_34232744的博客 94
上一篇: java之excel模板下载
下一篇: HTML上传文件样式type="file"
chenLeiInTuling
博客等级 码龄10年 5粉丝 28原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值