> 백엔드 개발 > PHP 튜토리얼 > javascript - jQuery+ajax文件上传失败,什么原因?

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

WBOY
풀어 주다: 2016-06-06 20:20:07
원래의
1342명이 탐색했습니다.

html部分:

<code><h2>文件上传</h2>
        <form id="up">
        <input type="file" name="pic" class="pic">
        <input type="button" value="提交" class="sub">
     </form></code>
로그인 후 복사
로그인 후 복사

后端php部分:ajax.php

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


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

?></code>
로그인 후 복사
로그인 후 복사

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>
로그인 후 복사
로그인 후 복사

报错说找不到$_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>
로그인 후 복사
로그인 후 복사

报错: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>
로그인 후 복사
로그인 후 복사

后端php部分:ajax.php

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


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

?></code>
로그인 후 복사
로그인 후 복사

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>
로그인 후 복사
로그인 후 복사

报错说找不到$_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>
로그인 후 복사
로그인 후 복사

报错: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>
로그인 후 복사

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

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

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

FormData

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

<code>      contentType: false, 
      processData: false,</code>
로그인 후 복사
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿