javascript - jQuery+ajax文件上传失败，什么原因？-php教程-PHP中文网

javascript - jQuery+ajax文件上传失败，什么原因？

php中文网

发布： 2016-06-06 20:20:07

原创

1585人浏览过

html部分：

<h2>文件上传</h2>
        <form id="up">
        <input type="file" name="pic" class="pic" />
        <input type="button" value="提交" class="sub" />
     </form>

登录后复制

后端php部分：ajax.php

<?php 
header("Content-Type: text/html;charset=utf8");


move_uploaded_file($_FILES["pic"]["tmp_name"],
"./" . "www.png");

?>

登录后复制

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

星辰Agent

科大讯飞推出的智能体Agent开发平台，助力开发者快速搭建生产级智能体

404

查看详情

用$.post方法的时候：

立即学习“Java免费学习笔记（深入）”；

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

登录后复制

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

回复内容：

html部分：

<h2>文件上传</h2>
        <form id="up">
        <input type="file" name="pic" class="pic" />
        <input type="button" value="提交" class="sub" />
     </form>

登录后复制

后端php部分：ajax.php

<?php 
header("Content-Type: text/html;charset=utf8");


move_uploaded_file($_FILES["pic"]["tmp_name"],
"./" . "www.png");

?>

登录后复制

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);  
          }  
     });  
            
})
})

登录后复制

用$.post方法的时候：

立即学习“Java免费学习笔记（深入）”；

$.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,

登录后复制

大家都在看：

php判断数组相等_array_diff比较数组相等方法【解析】 PHP怎么测试Redis连接_PHP测试Redis连接步骤【缓存】 PHP网站设计如何设计404错误页面_PHP自定义404页面方法【体验】 PHP如何处理苹果支付退款请求_苹果支付退款PHP处理步骤【指南】怎么用浏览器访问php文件_php文件浏览器访问路径【说明】