Home > Backend Development > PHP Tutorial > javascript - jQuery+ajax文件上传失败,什么原因?

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

WBOY
Release: 2016-06-06 20:20:07
Original
1342 people have browsed it

html部分:

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

后端php部分:ajax.php

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


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

?></code>
Copy after login
Copy after login

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

<code>$(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);  
          }  
     });  
            
})
})  </code>
Copy after login
Copy after login

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

用$.post方法的时候:

<code>$.post("ajax.php",fd,function(data){
            console.log(data);
         })</code>
Copy after login
Copy after login

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

回复内容:

html部分:

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

后端php部分:ajax.php

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


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

?></code>
Copy after login
Copy after login

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

<code>$(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);  
          }  
     });  
            
})
})  </code>
Copy after login
Copy after login

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

用$.post方法的时候:

<code>$.post("ajax.php",fd,function(data){
            console.log(data);
         })</code>
Copy after login
Copy after login

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

设置不对。

<code>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);
        }
    });
</code>
Copy after login

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

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

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

FormData

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

<code>      contentType: false, 
      processData: false,</code>
Copy after login
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template