热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

javascript-jQuery+ajax文件上传失败,什么原因?

html部分:{代码...}后端php部分:ajax.php{代码...}js部分,用js上传的时候是成功的,但用jquery的时候出现了两种错误:一种是用$.ajax方法:{代码...}报错说找不到$_FILES里的pic,为什么呢?补充:这个地...
html部分:

文件上传

后端php部分:ajax.php

js部分,用js上传的时候是成功的,但用jquery的时候出现了两种错误:
一种是用$.ajax方法:

$(function(){
        $(".sub").click(function(){
    
         var fd=new FormData($("#up"));
             
       $.ajax({  
          url: 'ajax.php' ,  
          type: 'POST',  
          data: fd,  
          async: false,  
          cache: false,  
          contentType: false, 
          processData: false,  
          success: function (returndata) {  
              alert(returndata);  
          },  
          error: function (returndata) {  
              alert(returndata);  
          }  
     });  
            
})
})  

报错说找不到$_FILES里的pic,为什么呢?
补充:这个地方搞定了,var fd=new FormData($("#up"));需要写成:
var fd=new FormData($("#up")[0]);
具体可见:http://segmentfault.com/q/1010000004213457
http://segmentfault.com/a/1190000002938709

用$.post方法的时候:

$.post("ajax.php",fd,function(data){
            console.log(data);
         })

报错:Uncaught TypeError: Illegal invocation
这又是为什么呢?
(jquery是1.7.1版本的)

回复内容:

html部分:

文件上传

后端php部分:ajax.php

js部分,用js上传的时候是成功的,但用jquery的时候出现了两种错误:
一种是用$.ajax方法:

$(function(){
        $(".sub").click(function(){
    
         var fd=new FormData($("#up"));
             
       $.ajax({  
          url: 'ajax.php' ,  
          type: 'POST',  
          data: fd,  
          async: false,  
          cache: false,  
          contentType: false, 
          processData: false,  
          success: function (returndata) {  
              alert(returndata);  
          },  
          error: function (returndata) {  
              alert(returndata);  
          }  
     });  
            
})
})  

报错说找不到$_FILES里的pic,为什么呢?
补充:这个地方搞定了,var fd=new FormData($("#up"));需要写成:
var fd=new FormData($("#up")[0]);
具体可见:http://segmentfault.com/q/1010000004213457
http://segmentfault.com/a/1190000002938709

用$.post方法的时候:

$.post("ajax.php",fd,function(data){
            console.log(data);
         })

报错:Uncaught TypeError: Illegal invocation
这又是为什么呢?
(jquery是1.7.1版本的)

设置不对。

var data = new FormData();
data.append('file', $('input[type=file]')[0].files[0]);
$.ajax({
        url: 'ajax.php',
        data: data,
        processData: false,
        type: 'POST'
        contentType: 'multipart/form-data',
        mimeType: 'multipart/form-data',
        success: function (data) {
            alert(data);
        }
    });

Ajax是不能上传附件的,如果需要上传附件请参考使用jQuery form插件

ajax只能传输文本流,不能运输二进制的文件。

可参考我写的关于FormData不刷新上传文件

FormData

ajax不能上传文件,还有form上传文件的enctype属性是要有的

      contentType: false, 
      processData: false,

推荐阅读
  • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
  • 本文介绍了如何使用jQuery和AJAX来实现动态更新两个div的方法。通过调用PHP文件并返回JSON字符串,可以将不同的文本分别插入到两个div中,从而实现页面的动态更新。 ... [详细]
  • 本文介绍了DataTables插件的官方网站以及其基本特点和使用方法,包括分页处理、数据过滤、数据排序、数据类型检测、列宽度自动适应、CSS定制样式、隐藏列等功能。同时还介绍了其易用性、可扩展性和灵活性,以及国际化和动态创建表格的功能。此外,还提供了参数初始化和延迟加载的示例代码。 ... [详细]
  • 前言:关于跨域CORS1.没有跨域时,ajax默认是带cookie的2.跨域时,两种解决方案:1)服务器端在filter中配置详情:http:blog.csdn.netwzl002 ... [详细]
  • Java实战之电影在线观看系统的实现
    本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述,然后展示了系统的效果图。接着介绍了系统的核心代码,包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明,包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]
  • 在springmvc框架中,前台ajax调用方法,对图片批量下载,如何弹出提示保存位置选框?Controller方法 ... [详细]
  • 从零基础到精通的前台学习路线
    随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
  • 本文介绍了Java后台Jsonp处理方法及其应用场景。首先解释了Jsonp是一个非官方的协议,它允许在服务器端通过Script tags返回至客户端,并通过javascript callback的形式实现跨域访问。然后介绍了JSON系统开发方法,它是一种面向数据结构的分析和设计方法,以活动为中心,将一连串的活动顺序组合成一个完整的工作进程。接着给出了一个客户端示例代码,使用了jQuery的ajax方法请求一个Jsonp数据。 ... [详细]
  • mui框架offcanvas侧滑超出部分隐藏无法滚动如何解决
    web前端|js教程off-canvas,部分,超出web前端-js教程mui框架中off-canvas侧滑的一个缺点就是无法出现滚动条,因为它主要用途是设置类似于qq界面的那种格 ... [详细]
  • Allegro总结:1.防焊层(SolderMask):又称绿油层,PCB非布线层,用于制成丝网印板,将不需要焊接的地方涂上防焊剂.在防焊层上预留的焊盘大小要比实际的焊盘大一些,其差值一般 ... [详细]
  • 本文介绍了一种处理AJAX操作授权过期的全局方式,以解决Asp.net MVC中Session过期异常的问题。同时还介绍了基于WebImage的图片上传工具类。详细内容请参考链接:https://www.cnblogs.com/starluck/p/8284949.html ... [详细]
  • 本文介绍了使用FormData对象上传文件同时附带其他参数的方法。通过创建一个表单,将文件和参数添加到FormData对象中,然后使用ajax发送POST请求进行文件上传。在发送请求时,需要设置processData为false,告诉jquery不要处理发送的数据;同时设置contentType为false,告诉jquery不要设置content-Type请求头。 ... [详细]
  • Jquery 跨域问题
    为什么80%的码农都做不了架构师?JQuery1.2后getJSON方法支持跨域读取json数据,原理是利用一个叫做jsonp的概念。当然 ... [详细]
  • Vue基础一、什么是Vue1.1概念Vue(读音vjuː,类似于view)是一套用于构建用户界面的渐进式JavaScript框架,与其它大型框架不 ... [详细]
  • 工作经验谈之-让百度地图API调用数据库内容 及详解
    这段时间,所在项目中要用到的一个模块,就是让数据库中的内容在百度地图上展现出来,如经纬度。主要实现以下几点功能:1.读取数据库中的经纬度值在百度上标注出来。2.点击标注弹出对应信息。3 ... [详细]
author-avatar
392399224_619416
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有