解决Ajax方式上传文件报错"Uncaught TypeError: Illegal invocation"

今天使用ajax上传文件时，出现了错误。数据传输的方式是通过定义formData完成的，提交的文件对象也设置为dom对象，但是还是不能发送请求。F12看到后台报了个错误：Uncaught TypeError: Illegal invocation，百度了一下，找到了解决方法。

解决方法：在ajax请求的参数中添加如下两个参数：

$.ajax({
  ...,
  processData: false,
  contentType: false,
  ...
});

processData

类型：Boolean

默认值: true。默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。

contentType

类型：String

默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。

默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器（即使没有数据要发送）。

总结

以上所述是小编给大家介绍的解决Ajax方式上传文件报错"Uncaught TypeError: Illegal invocation"问题，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

赞 (0)

相关推荐

  • 使用FormData进行Ajax请求上传文件的实例代码

    Servlet3.0开始提供了一系列的注解来配置Servlet.Filter.Listener等等.这种方式可以极大的简化在开发中大量的xml的配置.从这个版本开始,web.xml可以不再需要,使用相关的注解同样可以完成相应的配置. a.选中上传 b:后台显示 c:上传的文件夹 html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

  • Ajax上传图片及上传前先预览功能实例代码

    Ajax上传图片及上传前先预览功能实例代码

    手头上有几个小项目用到了easyUI,一开始决定使用easyUI就注定了项目整体上前后端分离,基本上所有的请求都采用Ajax来完成.在文件上传的时候用到了Ajax上传文件,以及图片在上传之前的预览效果,解决了这两个小问题,和小伙伴们分享下. 上传之前的预览 方式一 先来说说图片上传之前的预览问题.这里主要采用了HTML5中的FileReader对象来实现,关于FileReader对象,如果小伙伴们不了解,可以查看这篇文章HTML5学习之FileReader接口.我们来看看实现方式: <!DOCT

  • AjaxUpLoad.js实现文件上传功能

    AjaxUpLoad.js的使用实现无刷新文件上传,如图. 图1 文件上传前 图2 文件上传后 1.创建页面并编写HTML 上传文档: <div class="uploadFile"> <span id="doc"><input type="text" disabled="disabled" /></span> <input type="hidden"

  • thinkphp ajaxfileupload实现异步上传图片的示例

    thinkphp开发图片上传,图片异步上传是目前比较方便的功能,这里我就不写css文件了,将代码写出来.引入核心文件下载https://github.com/carlcarl/A... HTML 下面首先在html页面引入相关js资源 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片上传</title>

  • ajax实现上传图片保存到后台并读取的实例

    上传图片有两种方式: 1.fileReader  可以把图片解析成base64码的格式,简单粗暴 2.canvas  可以重新绘制一张图片,可以先把获取得到的图片的blob放进canvas里面,再生成宽高和透明度的图片,然后转成相应的类型传到后台,目前支持png和jpeg格式. 以上这篇ajax实现上传图片保存到后台并读取的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • FormData+Ajax实现上传进度监控

    什么是FormData? FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对.它可以更灵活方便的发送表单数据,因为可以独立于表单使用.如果你把表单的编码类型设置为multipart/form-data ,则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同: 如何创建一个FormData对象 你可以自己创建一个FormData对象,然后通过调用它的append()方法添加字段,就像这样: //实例化一个formData对象 var

  • php+ajax+h5实现图片上传功能

    本文实例为大家分享了php实现ajax图片上传的具体代码,供大家参考,具体内容如下 html页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="__PUBLIC__

  • Ajax实现图片上传并预览功能

    先给大家展示下效果图,大家感觉不错,请参考实现代码. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图片上传需要一个input:file表单 <input type='file' name='pic'> 当我们点击表单的时候提示选择需要上传的图片.但是此需求我们分析一下,可以在点击图片的时候使用JS实现预览功能,并且楼主也是这样做的.代码如下: function getFileUrl(source

  • jquery ajax实现文件上传功能实例代码

    下面看下ajax实现文件上传   没有使用插件 一.单文件上传 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <title></

  • js ajaxfileupload.js上传报错的解决方法

    相信大家在工作中经常用到文件上传的操作,因为我是搞前端的,所以这里主要是介绍ajax在前端中的操作.代码我省略的比较多,直接拿js那里的 $.ajaxFileUpload({ url:'www.coding/mobi/file/uploadSingleFile.html',//处理图片脚本 secureuri :false, fileElementId :'image2',//file控件id.就是input type="file" id="image2" data

随机推荐