位置: 编程技术 - 正文

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九宫格)

  • 净利润跟税后利润是二个概念吗
  • 捐赠支出增值税
  • 企业所得税纳税义务人
  • 定期定额户需要做账吗
  • 工业土地摊销年限最新规定
  • 现金预算属于营业预算吗
  • 企业之间的借款利息计入什么科目
  • 股东出让个人股权流程
  • 有限合伙企业中有限合伙人承担责任的方式为
  • 建筑业出售废旧电脑取的收入如何申报
  • 融资租入固定资产
  • 委托加工物资的账务处理例题
  • 免税的投资收益需要调整利润表吗
  • 增值税免税收入进项税额转出
  • 17增值税发票怎么计算
  • 如何理解出口退税政策
  • 自产自销的产品怎么做账
  • 差旅费住宿专票可以抵扣增值税吗
  • 销售开发后的产品
  • 股票派息后会除权吗
  • 总资产净利率计算
  • 更改onedrive文件夹位置
  • 企业所得税应纳税额的计算公式
  • iphone6按键功能介绍
  • 外贸企业出口货物
  • 旅游开发公司税率
  • 冲减预交的增值税税率
  • php中表单的使用
  • mac os常用快捷键
  • 个人投资额是什么意思
  • 购入专利权的会计科目
  • 出租车车票可以出卖吗
  • 计算机指令用来做什么
  • 四个常见html网页乱码问题及解决办法
  • 辞退补偿款怎么算
  • 运输取得的收入
  • vue 父组件调子组件方法
  • 委托研发技术合同登记
  • cpu spread spectrum
  • ps黑白怎么调
  • 人才引进的安家费
  • 应收票据利息的确认
  • 开发票的盘锁了
  • js函数声明的提出者
  • 有什么学电脑的网站
  • 房屋扩建后折旧费怎么算
  • 工会经费怎么计算缴纳
  • 记账凭证附件粘贴
  • 公司买15万的车可以抵扣多少税
  • 收到联营企业分红怎么做
  • 小规模纳税人做工资没交社保
  • 小规模纳税人开专票需要交税吗
  • 电子发票报销后退款
  • 房租押金是什么意思?
  • 税控设备抵减增值税金额
  • 给对方承兑对方不承认怎么办
  • 资产负债表本期没有发生额怎么填
  • 产品是如何产生的
  • 单独设置停工损失科目
  • 债权人接受债务人土地抵押,还会被其他债权人查封?
  • xp系统环境变量
  • gamebar.exe是什么进程
  • vc运行程序exe停止工作
  • macbookpro日历
  • win7系统打开网络看不到其他电脑
  • xp系统里的打印机怎么设置的和新7
  • linux 文字处理
  • scureapp.exe - scureapp是什么进程 有什么用
  • win7电脑屏幕设置常亮不黑屏
  • ndk sdk
  • perl -i -pe
  • shell脚本定时执行命令
  • django admin form
  • bootstrap layer弹框
  • 百旺怎么导出数据
  • 陕西省国家励志奖学金证书查询入口
  • 如何在税务系统增加开票人员
  • 国家税务总局,河北省税务局
  • 福建平潭综合实验区属于哪个市
  • 欠税多少构成犯罪
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设