ホームページ バックエンド開発 PHPチュートリアル thinkphp (php) + Ajax で画像をアップロード

thinkphp (php) + Ajax で画像をアップロード

Aug 08, 2016 am 09:23 AM
data file json return

使用される外部プラグイン:

  • jquery.form.js (フォーム送信): http://malsup.com/jquery/form/#download

  • jquery.json.min.js (json を解析)データ): http://www.oschina.net/p/jquery-json

フォームコード部分:

<code><form tag=<span>"img_file_upload"</span> id=<span>"file_upload"</span> name=<span>"file_upload"</span><span>method</span>=<span>"post"</span> action=<span>"<{:U('File/fileUpload')}>" enctype=<span>"multipart/form-data"</span>>
    <input <span><span>type</span>=</span><span>"file"</span> id=<span>"img"</span> name=<span>"file"</span>>
    <input <span><span>type</span>=</span><span>"hidden"</span> name=<span>"member_id"</span><span>value</span>=<span>"<{:$_SESSION[C('USER_AUTH_KEY')]}>"/>
    <input <span><span>type</span>=</span><span>"button"</span><span>value</span>=<span>"上传"</span> >"submitImgForm()"</span>/>
</form>

<img tag=<span>"show_photo_upload_img"</span> src=<span>""</span> alt=<span>""</span>/></code>
ログイン後にコピー

jsコード:

<code><span><<span>script</span>></span><span><span><span>function</span><span>submitImgForm</span><span>()</span>{</span><span>if</span> ($(<span>"#img"</span>).val() == <span>""</span>) {
            alert(<span>"请选择一个图片文件,再点击上传。"</span>);
            <span>return</span>;
        }
        <span>var</span> file_form = $(<span>"[tag='img_file_upload']"</span>);
        <span>var</span> show_img = $(<span>"[tag='show_photo_upload_img']"</span>);
        <span>var</span> options = {
            type : <span>'post'</span>,
            url : <span>"<{:U('File/fileUpload')}>"</span>,
            dataType: <span>'text'</span>,
            contentType: <span>"application/json; charset=utf-8"</span>,
            beforeSubmit:<span><span>function</span><span>()</span>{</span>
              alert(<span>'正在上传'</span>);
            },
            success:<span><span>function</span><span>(data)</span> {</span><span>var</span> json_obj = <span>JSON</span>.parse(data);

                show_img.attr(<span>'src'</span>,json_obj.img_path);
                alert(json_obj.error);
            },
            error:<span><span>function</span><span>(XmlHttpRequest, textStatus, errorThrown)</span>{</span>
                alert(textStatus);
                alert(errorThrown);
            }
        };

        file_form.ajaxSubmit(options);
    }
</span><span></<span>script</span>></span></code>
ログイン後にコピー

バックエンドphp部分:

<code><span><span>function</span><span>fileUpload</span><span>()</span>{</span><span>$config</span> = C(<span>'FILE_UPLOAD_CONFIG'</span>);
        <span>//附带的信息</span><span>$request_data</span> = I(<span>'post.'</span>);
<span>//        show_bug($request_data);</span><span>$member_id</span> = <span>$request_data</span>[<span>'member_id'</span>];
        <span>if</span>(<span>empty</span>(<span>$the_file_usage</span>)){
            <span>$the_file_usage</span> = <span>$file_usage</span>[<span>'DOWNLOAD'</span>];
        }

<span>//        show_bug_with_exit($file_name);</span><span>$file_info</span>[<span>'member_id'</span>] = <span>$member_id</span>;
        <span>$file_info</span>[<span>'created_time'</span>] = time();

            <span>// 上传文件</span><span>//实例化上传类,传入上面的配置数组</span><span>$uploader</span> = <span>new</span> Upload(<span>$config</span>, <span>'Local'</span>);
<span>//            $uploader->saveName = $file_uuid;</span><span>$info</span> = <span>$uploader</span>->upload(<span>$_FILES</span>);
<span>//        show_bug_with_exit($info);</span><span>//这里判断是否上传成功</span><span>if</span> (<span>$info</span>) {
                <span>//// 上传成功 获取上传文件信息</span><span>foreach</span> (<span>$info</span><span>as</span> &<span>$file</span>) {
                    <span>//拼接出上传目录</span><span>$file</span>[<span>'rootpath'</span>] = __ROOT__ . ltrim(<span>$config</span>[<span>'rootPath'</span>], <span>"."</span>);
                    <span>//拼接出文件相对路径</span><span>$file</span>[<span>'filepath'</span>] = <span>$file</span>[<span>'rootpath'</span>] . <span>$file</span>[<span>'savepath'</span>] . <span>$file</span>[<span>'savename'</span>];
                }
                <span>//这里可以输出一下结果,相对路径的键名是$info['upload']['filepath']</span><span>$filepath</span> = <span>$file</span>[<span>'filepath'</span>];
<span>//                show_bug_with_exit($filepath);</span><span>$file_info</span>[<span>'file_path'</span>] = <span>$filepath</span>;


                <span>$save_file_in_DB</span> = <span>$this</span>->saveFileInfoIntoDB(<span>$file_info</span>);
                <span>//如果文件数据往数据库中存储失败,则删除文件</span><span>if</span>(!<span>$save_file_in_DB</span>){
                    unlink(<span>$filepath</span>);
                    <span>$return_data</span>[<span>'error'</span>] = <span>'文件上传失败,请重试'</span>;
                    <span>echo</span> json_encode(<span>$return_data</span>);
                }

                <span>$return_data</span>[<span>'error'</span>] = <span>'文件上传成功'</span>;
                <span>$return_data</span>[<span>'img_path'</span>] = <span>$filepath</span>;
                <span>$return_data</span>[<span>'img_id'</span>] = <span>$save_file_in_DB</span>;
                jsonReturn(<span>$return_data</span>);
            } <span>else</span> {
                <span>//输出错误信息</span><span>$error_msg</span> = <span>$uploader</span>->getError();
                <span>$return_data</span>[<span>'error'</span>] = <span>$error_msg</span>;
                jsonReturn(<span>$return_data</span>);
            }
    }


    <span><span>function</span><span>saveFileInfoIntoDB</span><span>(<span>$file_info</span>)</span>{</span><span>$file</span> = M(<span>'File'</span>);
        <span>$rs_u_file</span> = <span>$file</span>->add(<span>$file_info</span>);
        <span>$file_id</span> = <span>$file</span>->getLastInsID();
        <span>if</span>(!<span>$rs_u_file</span>){
            <span>return</span><span>false</span>;
        }
        <span>return</span><span>$file_id</span>;
    }</code>
ログイン後にコピー

設定ファイル:

<code><span>'FILE_UPLOAD_CONFIG'</span>=><span>array</span>(
        <span>'mimes'</span> => <span>''</span>, <span>//允许上传的文件MiMe类型</span><span>'maxSize'</span> => <span>6</span> * <span>1024</span> * <span>1024</span>, <span>//上传的文件大小限制 (0-不做限制)</span><span>'exts'</span> => <span>array</span>(<span>'jpg'</span>, <span>'gif'</span>, <span>'png'</span>, <span>'jpeg'</span>),<span>// 设置附件上传类型</span><span>'autoSub'</span> => <span>true</span>, <span>//自动子目录保存文件</span><span>'subName'</span> => <span>array</span>(<span>'date'</span>, <span>'Y-m-d'</span>), <span>//子目录创建方式,[0]-函数名,[1]-参数,多个参数使用数组</span><span>'rootPath'</span> => <span>'./Uploads/'</span>, <span>//保存根路径</span><span>'savePath'</span> => <span>''</span>, <span>//保存路径</span><span>'saveName'</span>   =>    <span>array</span>(<span>'uniqid'</span>,<span>''</span>),
    ),</code>
ログイン後にコピー

関数。 php ファイル

<code><span>/**
 * 返回json格式的数据到客户端
 *<span> @access</span> protected
 *<span> @param</span> mixed $data 要返回的数据
 *<span> @return</span> void
 */</span><span><span>function</span><span>jsonReturn</span><span>(<span>$data</span>)</span>{</span><span>$json_str</span> = json_encode(<span>$data</span>);
    <span>// 返回JSON数据格式到客户端 包含状态信息</span>
    header(<span>'Content-Type:application/json; charset=utf-8'</span>);
    <span>//处理json中包含的‘null’,将其替换成空字符串</span><span>$search</span> = <span>'null'</span>;
    <span>$replace</span> = <span>'""'</span>;
    <span>$returndata</span> = str_replace(<span>$search</span>, <span>$replace</span>, <span>$json_str</span>);
<span>//  testAddDataIntoTestTable(null,$returndata);</span><span>exit</span>(<span>$returndata</span>);
}</code>
ログイン後にコピー

上記では、関連コンテンツを含む thinkphp (php) + Ajax をアップロードする方法を紹介しました。PHP チュートリアルに興味のある友人に役立つことを願っています。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、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)

紅夢ネイティブアプリケーションのランダムな詩 紅夢ネイティブアプリケーションのランダムな詩 Feb 19, 2024 pm 01:36 PM

オープン ソースの詳細については、次のサイトを参照してください。 51CTO Honmeng 開発者コミュニティ https://ost.51cto.com 実行環境 DAYU200:4.0.10.16SDK: 4.0.10.15IDE: 4.0.600 1. アプリケーションを作成するには、[ファイル] をクリックします。 >新しいファイル ->プロジェクトの作成。テンプレートを選択します: [OpenHarmony] EmptyAbility: プロジェクト名 shici、アプリケーション パッケージ名 com.nut.shici、およびアプリケーションの保存場所 XXX (中国語、特殊文字、スペースは含まれません) を入力します。 CompileSDK10、モデル: ステージ。デバイス

golang WebSocketとJSONの組み合わせ:データ送信と解析を実現 golang WebSocketとJSONの組み合わせ:データ送信と解析を実現 Dec 17, 2023 pm 03:06 PM

golangWebSocket と JSON の組み合わせ: データ送信と解析の実現 現代の Web 開発では、リアルタイムのデータ送信がますます重要になっています。 WebSocket は双方向通信を実現するために使用されるプロトコルで、従来の HTTP リクエスト/レスポンス モデルとは異なり、WebSocket を使用すると、サーバーがクライアントにデータをアクティブにプッシュできます。 JSON (JavaScriptObjectNotation) は、簡潔で読みやすいデータ交換用の軽量形式です。

MySQL5.7とMySQL8.0の違いは何ですか? MySQL5.7とMySQL8.0の違いは何ですか? Feb 19, 2024 am 11:21 AM

MySQL5.7 と MySQL8.0 は 2 つの異なる MySQL データベース バージョンであり、それらの間には主な違いがいくつかあります: パフォーマンスの向上: MySQL8.0 では、MySQL5.7 と比較してパフォーマンスがいくつか向上しています。これには、より優れたクエリ オプティマイザー、より効率的なクエリ実行プランの生成、より優れたインデックス作成アルゴリズムと並列クエリなどが含まれます。これらの改善により、クエリのパフォーマンスとシステム全体のパフォーマンスが向上します。 JSON サポート: MySQL 8.0 では、JSON データのストレージ、クエリ、インデックス作成など、JSON データ型のネイティブ サポートが導入されています。これにより、MySQL での JSON データの処理と操作がより便利かつ効率的になります。トランザクション機能: MySQL8.0 では、アトミックなどのいくつかの新しいトランザクション機能が導入されています。

PHP 配列を JSON に変換するためのパフォーマンス最適化のヒント PHP 配列を JSON に変換するためのパフォーマンス最適化のヒント May 04, 2024 pm 06:15 PM

PHP 配列を JSON に変換するためのパフォーマンスの最適化方法には、JSON 拡張機能と json_encode() 関数の使用、文字エスケープを回避するためのバッファーの使用、およびサードパーティのエンコード結果の使用の検討が含まれます。 JSONエンコーディングライブラリ。

Pandas の使用法チュートリアル: JSON ファイルを読み取るためのクイック スタート Pandas の使用法チュートリアル: JSON ファイルを読み取るためのクイック スタート Jan 13, 2024 am 10:15 AM

クイック スタート: JSON ファイルを読み取る Pandas の方法、特定のコード サンプルが必要です はじめに: データ分析とデータ サイエンスの分野では、Pandas は重要な Python ライブラリの 1 つです。豊富な機能と柔軟なデータ構造を備え、さまざまなデータを簡単に処理・分析できます。実際のアプリケーションでは、JSON ファイルを読み取る必要がある状況によく遭遇します。この記事では、Pandas を使用して JSON ファイルを読み取る方法を紹介し、具体的なコード例を添付します。 1.パンダのインストール

Jackson ライブラリのアノテーションは、JSON のシリアル化と逆シリアル化をどのように制御しますか? Jackson ライブラリのアノテーションは、JSON のシリアル化と逆シリアル化をどのように制御しますか? May 06, 2024 pm 10:09 PM

Jackson ライブラリのアノテーションは、JSON のシリアル化と逆シリアル化を制御します。 シリアル化: @JsonIgnore: プロパティを無視します @JsonProperty: 名前を指定します @JsonGetter: get メソッドを使用します @JsonSetter: set メソッドを使用します Deserialization: @JsonIgnoreProperties: プロパティ @ JsonProperty を無視します:名前を指定 @JsonCreator: コンストラクターを使用 @JsonDeserialize: カスタム ロジック

C# 開発で XML および JSON データ形式を処理する方法 C# 開発で XML および JSON データ形式を処理する方法 Oct 09, 2023 pm 06:15 PM

C# 開発で XML および JSON データ形式を処理する方法には、特定のコード サンプルが必要です。現代のソフトウェア開発では、XML と JSON の 2 つのデータ形式が広く使用されています。 XML (Extensible Markup Language) はデータの保存と送信に使用されるマークアップ言語であり、JSON (JavaScript Object Notation) は軽量のデータ交換形式です。 C# 開発では、XML と JSON データの処理と操作が必要になることがよくありますが、この記事では、C# を使用してこれら 2 つのデータ形式を処理し、添付する方法に焦点を当てます。

golang の json.MarshalIndent 関数を使用して、構造をフォーマットされた JSON 文字列に変換します。 golang の json.MarshalIndent 関数を使用して、構造をフォーマットされた JSON 文字列に変換します。 Nov 18, 2023 pm 01:59 PM

golang で json.MarshalIndent 関数を使用して、構造をフォーマットされた JSON 文字列に変換します。Golang でプログラムを作成するとき、多くの場合、構造を JSON 文字列に変換する必要があります。このプロセスでは、 json.MarshalIndent 関数が役に立ちます。フォーマットされた出力。以下では、この関数の使用方法と具体的なコード例を詳しく説明します。まず、データを含む構造体を作成しましょう。以下は目安です

See all articles