位置: 编程技术 - 正文

jQuery的ajax中使用FormData实现页面无刷新上传功能

编辑:rootadmin

推荐整理分享jQuery的ajax中使用FormData实现页面无刷新上传功能,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的FormData接口。关于FormData,大家可以看MDN文档。

1,先看效果图

期望的功能和效果很简单:点击页面中的上传文件表单控件,选择文件后点击“ajax提交”,将文件上传至服务器,上传成功后,页面给出一个简单的提示。

2,前端的代码

看下html代码:

代码很简单,需要注意的是页面中没有用到form表单,那么怎么提交数据呢,答案是用FormData来模拟表单中的 <input type="file" name="myfile"> 控件。另外,页面中的样式没有写出来。下面来看下html中引入的upload.js代码,这个是重点。

upload.js代码:

(1) 下面解释下FormData,涉及到了代码的第4、6、行。

第4行 var formData = new FormData(); 实例化了一个空的FormData对象,可以认为它就是一个form表单,但现在里面什么控件都没有。

jQuery的ajax中使用FormData实现页面无刷新上传功能

第6行 formData.append('myfile', $('input[name=myfile]')[0].files[0]); ,给实例化的formdata对象添加一个控件,注意这里添加的是已有控件 <input type="file" name="myfile" style="font-size: 0.7rem;"> (见html代码第4行)。

FormData.append(name, value, filename)方法可以很方便的以“键-值”对的形式给FormData添加控件,注意第3个参数“上传文名”是可选的,它的具体语法和用法见FormData。

第行,将实例化的formData作为jQuery.ajax()方法data参数的值传递进去,提交给后端服务器。

(2) 再解释下ajax()方法中的contentType、processData参数。

contentType参数,发起http请求时设置的请求头中的contentType。jQuery.ajax()默认的值为:'application/x-www-form-urlencoded; charset=UTF-8',这个在大多数情况下都是适用的。

但经过测试,保持默认时会报错,因为发送的数据中有input type="file"(上传文件),那么这时contentType应该设置为'multipart/form-data',但如果指定为这个类型服务端(php)就会报这个错误: Warning: Missing boundary in multipart/form-data POST data in Unknown on line 0 。具体原因现在还不清楚,所以这里先将contentType设置为false,即不让jQuery设置contentType。

processData参数,根据jQuery.ajax()文档中的解释,默认情况下,jQuery会处理发送的数据,将数据按照'application/x-www-form-urlencoded'的要求转换为查询字符串,如果要发送的数据是DOMDocument或者不需要处理,就可以设置为false不让jQuery转换数据,我们这里要发送的数据其实就是DOMDocument。

经过测试,如果保持默认(true)的话,在发起请求前js会报错: TypeError: 'append' called on an object that does not implement interface FormData.

另外还有个dataType参数,期望从服务器中返回的数据格式,这里最好也不要指定,而是让jquery自己根据http响应头中的contentType判断,然后返回一个合适的数据类型。指定后不会影响后台程序的逻辑处理,但你在前端接收的数据很可能不是期望的数据,于是js就会报这一类错误: SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data ,这个是将dataType指定为json后报的错误。

3,后端的php代码

后端服务器是nginx,用php来处理发送过来的数据,代码也很简单:

代码的逻辑很简单这里就不多解释了。主要说下我在调试程序时遇到的问题,遇到的问题总结起来就一句话:当使用FormData配合ajax上传文件时,$_REQUEST、$_POST都是空数组,

jquery——九宫格大转盘抽奖实例 一、用到的图片二、代码如下,重点是js部分!DOCTYPEhtmlhtmlheadmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/titlejQuery九宫格大转盘抽奖/titlestyle#lottery{wid

jQuery使用正则表达式替换dom元素标签用法示例 本文实例讲述了jQuery使用正则表达式替换dom元素标签用法。分享给大家供大家参考,具体如下:这里主要通过如下正则表达式来替换dom元素中的标签:/[

jQuery居中元素scrollleft计算方法示例 本文实例讲述了jQuery居中元素scrollleft计算方法。分享给大家供大家参考,具体如下:如果需要将某个元素在可以滚动元素(scroll)中设置为居中计算方

标签: jQuery的ajax中使用FormData实现页面无刷新上传功能

本文链接地址:https://www.jiuchutong.com/biancheng/370585.html 转载请保留说明!

上一篇:基于jQuery实现的打字机效果(jquery可以实现哪些效果)

下一篇:jquery——九宫格大转盘抽奖实例(php九宫格)

  • 税务申报退税
  • 高档珍珠镶嵌
  • 购买材料,收回会计分录
  • 增值税普通发票有什么用
  • 货运代理费计入固定资产吗
  • 预计净残值和残值
  • 金税四期对企业的风险
  • 个人所得税应补税额怎么办
  • 购入土地使用权以什么为计税依据
  • 小企业费用包括哪些
  • 无形资产减值是否可以转回
  • 生产中材料的合理损耗核算
  • 购买债券取得的利息收入计入什么科目
  • 没有实收资本是负债吗
  • 建安业核定征收利润率
  • 显示发票离线,应当如何处理
  • 企业所得税季度申报填写示例
  • 营改增后固定资产入账
  • 公司不动产管理办法
  • 无票收入可以存钱吗
  • win10回退到以前版本失败
  • 定期存款利息收入怎么算
  • 金税盘申请电子发票成功后怎样手工导入
  • 调整上年度多计提的附加税
  • 宏基笔记本一键恢复系统
  • php字符串型数据的定义方式
  • 直系亲属股权转让免征个人所得税
  • 小规模纳税人购车是怎么抵税的
  • 巴黎先贤祠的名言
  • php动态页面实例
  • 年终双薪是底薪吗
  • 实收资本主要包括哪些
  • 购货方退货并已签收
  • 个体户对公账户怎么办理
  • php数据库分页是怎么实现的
  • 未注销的坏账可以处理吗
  • 小帽科技
  • 用友固定资产模块反结账
  • 企业合并兼并收购的区别和联系
  • 预收货款尚未发货
  • sklearn实例
  • ❤️国庆假期快到了,用python写个倒计时程序,助你熬到假期!❤️
  • 报销人和收款人是一个人
  • 进项税额转出忘记申报咋办
  • 增值税附表3
  • 哪些人可以享受职业培训补贴
  • 票据承兑和贴现是指
  • sql条件查询语句怎么写
  • 合伙企业的合伙人有下列情形中的当然退伙
  • 增值税附加税的比例
  • 费用暂估入账后期如何冲销
  • 应收管理费,做应收款处理会计分录
  • 租厂房需要办环评注意事项
  • 原材料变为商品怎么做账
  • 法人银行贷款
  • 社会保险费结算表怎么打印
  • 客户从公司借钱怎么拒绝
  • 水利建设基金的征税对象
  • 公司里的废品的处理一般是谁负责
  • 结转销售成本怎么操作
  • mysql从一个表导入记录到另一个表
  • sql2005定时备份数据库
  • xp系统怎么添加ip地址
  • centos6 grub
  • svchos1.exe - svchos1是什么教程 有什么作用
  • linux卸载apache2
  • Win10打开或关闭系统图标里开怎么灰色的
  • win7使用技巧图解
  • linux rsync同步命令(值得收藏)
  • css设置最大高度
  • 用jquery实现全选
  • 事件绑定js
  • JavaScript中Date.toSource()方法的使用教程
  • 刚开始学java的心得体会
  • javascript 性能
  • JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
  • 房产税纳税义务时间
  • 个人所得税减免标准及明细
  • 银行买理财注意事项
  • epc项目不接受联合体投标违规吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设