目次
文件上传
回复内容:
ホームページ バックエンド開発 PHPチュートリアル javascript - jQuery+ajax文件上传失败,什么原因?

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

Jun 06, 2016 pm 08:20 PM
ajax formdata javascript php ファイルのアップロード

html部分:

<code><h2 id="文件上传">文件上传</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 id="文件上传">文件上传</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>
ログイン後にコピー
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Ubuntu および Debian 用の PHP 8.4 インストールおよびアップグレード ガイド Ubuntu および Debian 用の PHP 8.4 インストールおよびアップグレード ガイド Dec 24, 2024 pm 04:42 PM

PHP 8.4 では、いくつかの新機能、セキュリティの改善、パフォーマンスの改善が行われ、かなりの量の機能の非推奨と削除が行われています。 このガイドでは、Ubuntu、Debian、またはその派生版に PHP 8.4 をインストールする方法、または PHP 8.4 にアップグレードする方法について説明します。

CakePHP の日付と時刻 CakePHP の日付と時刻 Sep 10, 2024 pm 05:27 PM

Cakephp4 で日付と時刻を操作するには、利用可能な FrozenTime クラスを利用します。

CakePHP ファイルのアップロード CakePHP ファイルのアップロード Sep 10, 2024 pm 05:27 PM

ファイルのアップロードを行うには、フォーム ヘルパーを使用します。ここではファイルアップロードの例を示します。

CakePHP について話し合う CakePHP について話し合う Sep 10, 2024 pm 05:28 PM

CakePHP は、PHP 用のオープンソース フレームワークです。これは、アプリケーションの開発、展開、保守をより簡単にすることを目的としています。 CakePHP は、強力かつ理解しやすい MVC のようなアーキテクチャに基づいています。モデル、ビュー、コントローラー

CakePHP バリデータの作成 CakePHP バリデータの作成 Sep 10, 2024 pm 05:26 PM

Validator は、コントローラーに次の 2 行を追加することで作成できます。

CakePHP のロギング CakePHP のロギング Sep 10, 2024 pm 05:26 PM

CakePHP へのログインは非常に簡単な作業です。使用する関数は 1 つだけです。 cronjob などのバックグラウンド プロセスのエラー、例外、ユーザー アクティビティ、ユーザーが実行したアクションをログに記録できます。 CakePHP でのデータのログ記録は簡単です。 log()関数が提供されています

PHP 開発用に Visual Studio Code (VS Code) をセットアップする方法 PHP 開発用に Visual Studio Code (VS Code) をセットアップする方法 Dec 20, 2024 am 11:31 AM

Visual Studio Code (VS Code とも呼ばれる) は、すべての主要なオペレーティング システムで利用できる無料のソース コード エディター (統合開発環境 (IDE)) です。 多くのプログラミング言語の拡張機能の大規模なコレクションを備えた VS Code は、

CakePHP サービス CakePHP サービス Sep 10, 2024 pm 05:26 PM

この章では、CakePHP で利用できる認証プロセスに関する情報を扱います。

See all articles