[转载]使用AJAX实现文件上传时illegal invocation错误的原因及解决方案
1、结合Jquery使用ajax2.0的时候出了如下的一个错误
2、代码部分:
<script> $(function(){ $('input').change(function(){ //使用JQ的ajax //结合formData实现图片预览 var sendData=new FormData(); sendData.append('icon',this.files[0]); $.ajax({ url:'backData.php', data:sendData, type:'post', success:function(backData){ console.log(backData); } }) }) }) </script>
3、在写完上述代码后浏览器中运行的时候就报了这个错误,相信应该也有人出现过这个错误,针对于我这个实例所报的错误,我进行了如下几部操作来解决这个问题:
3.1 百度问大神,搜到相关的问题,有大神给出如下答复:
3.2 按照上述的答案,打开Jquery的官网,查询ajax,然后搜索processData
根据上面的文档提示设置了一下之后,illegal invocation报错就没了,但是还有其他的报错,内容有问题。
3.3 F12打开我们的控制台,检查一下headers里面的content—type,因为在前面的博客中我有写到,ajax2.0是不用设置请求头的,但是打开控制台可以看到控制台中已经有设置了,这是因为JQ给我们自动设置了。
3.4 依旧在Jquery的官网中,查询ajax,然后搜索contentType的设置
将contentType:false;这行代码给写上去,页面就没有报错了。
4、代码修改:
4.1 因为传进来的参数被预先处理了,所以才出现了illegal invocation报错,只要将processData的值改为false就能解决这个小问题;
4.2 因为JQ自动的帮我们设置了请求头,但是ajax2.0中不需要设置请求头,我们找到contentType,把它的值设为false就能够取消掉这个设置。
4.3 完整代码如下:
$(function(){ $('input').change(function(){ //使用JQ的ajax //结合formData实现图片预览 var sendData=new FormData(); sendData.append('icon',this.files[0]); $.ajax({ url:'backData.php', data:sendData, type:'post', //ajax2.0可以不用设置请求头,但是jq帮我们自动设置了,这样的话需要我们自己取消掉 contentType:false, //取消帮我们格式化数据,是什么就是什么 processData:false, success:function(backData){ console.log(backData); } }) }) }) </script>
总结:上述两行代码很重要,但是更重要的是我们解决问题的办法,出错不可怕,可怕的是不会解决问题,我们要善于运用我们的工具文档,还有,要善于求助大神指点,出现这样的错误可能还有其他的原因,这里只以我的这个案例为例,如若有其他的问题欢迎大家一起交流啦~~~~
原文地址:https://www.geek-share.com/detail/2737440666.html
- 使用AJAX实现文件上传时illegal invocation错误的原因及解决方案
- Asp.Net Mvc 使用jQuery实现Ajax文件上传
- 使用隐藏的iframe 隐藏form提交,仿AJax无刷新提交,可以实现无刷新上传文件
- 使用struts2和AJAX实现文件上传并显示进度条
- 使用Commons net实现FTP上传文件(网络问题无响应解决方案)
- 如何实现ajaxFileUpload 多文件上传 和springMVC联合使用
- jQuery插件AjaxFileUpload实现ajax文件上传时老是执行error方法 问题原因
- 使用ajaxFileUpload实现文件异步上传
- Ajax实现文件上传(使用jQuery插件之ajaxFileUpload)
- vuejs使用FormData实现ajax上传图片文件
- springMVC使用ajax实现文件上传
- (转自dflying chen)使用Anthem.NET 1.5中的FileUpload控件实现Ajax方式的文件上传
- 【转载】使用jsp实现文件上传到服务器或者从服务器上下载文件到本地计算机完整说明版
- 使用AjaxFileUpload.js实现异步文件上传示例
- MVC5:使用Ajax和HTML5实现文件上传功能
- 使用ajax、servlet实现多文件的上传
- 使用html+ajax+formdata+SpringMVC实现单个文件,和多个文件上传功能
- 使用隐藏的iframe 隐藏form提交,仿AJax无刷新提交,可以实现无刷新上传文件
- 使用Ajax+Iframe 实现无刷新文件上传
- 使用ajax实现文件上传