ホームページ php教程 PHP开发 AjaxFileUpload は非同期ファイルアップロードを実装します (AjaxFileUpload.js ファイルのダウンロードとパラメーターの導入)

AjaxFileUpload は非同期ファイルアップロードを実装します (AjaxFileUpload.js ファイルのダウンロードとパラメーターの導入)

Dec 12, 2016 pm 05:38 PM
ajaxfileupload

AjaxFileUpload は、より優れた非同期ファイル アップロードを実現し、使い方が簡単です:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="http://www.phpddt.com/usr/themes/dddefault/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="ajaxfileupload.js"></script>
    </head>
<script>
jQuery(function(){   
  $("#buttonUpload").click(function(){     
     //加载图标   
     /* $("#loading").ajaxStart(function(){
        $(this).show();
     }).ajaxComplete(function(){
        $(this).hide();
     });*/
      //上传文件
    $.ajaxFileUpload({
        url:&#39;upload.php&#39;,//处理图片脚本
        secureuri :false,
        fileElementId :&#39;fileToUpload&#39;,//file控件id
        dataType : &#39;json&#39;,
        success : function (data, status){
            if(typeof(data.error) != &#39;undefined&#39;){
                if(data.error != &#39;&#39;){
                    alert(data.error);
                }else{
                    alert(data.msg);
                }
            }
        },
        error: function(data, status, e){
            alert(e);
        }
})
return false;
  }) 
})
</script>
    <body>
        <input id="fileToUpload" type="file" size="20" name="fileToUpload" class="input">
        <button id="buttonUpload">上传</button>
    </body>
</html>
ログイン後にコピー

Upload はパラメータも渡すことができます:

var data = { name: &#39;my name&#39;, description: &#39;short description&#39; } 
    $.ajaxFileUpload({
        url: &#39;upload.php&#39;,
        secureuri: false,
        data: data,
        fileElementId: &#39;fileToUpload&#39;,
        dataType: &#39;json&#39;,
        success: function (data) {
            alert(data.msg);
 
        },
        error: function (data) {
            alert("error");
        }
    });
ログイン後にコピー

主なパラメータの説明:
1. URL は、ファイル アップロード操作を処理するためのファイル パスを表します。ブラウザで使用されます 直接アクセス(上記のように):upload.php
2、fileElementIdはファイルドメインIDを表します(上記のように):fileToUpload
3、secureuriが安全な送信を有効にするかどうか、デフォルトはfalse
4、dataTypeデータ、通常はjsonを選択します、JavaScript の独自のエコシステム
5、成功した送信後の処理関数
6、失敗した送信のエラー処理関数

関連するエラー プロンプトを知る必要があります

1、SyntaxError: missing; before state error
このエラーが発生した場合、 URL パスがアクセス可能かどうかを確認する必要があります

2、SyntaxError: 構文エラー
このエラーが発生した場合は、送信操作を処理している PHP ファイルに構文エラーがあるかどうかを確認する必要があります

3、SyntaxError: 無効なプロパティ ID エラー
このエラーが発生した場合は、プロパティ ID が存在するかどうかを確認する必要があります

4、SyntaxError: missing } in XML Expression error
このエラーが発生した場合は、ファイルのドメイン名が一貫しているか、存在しないかどうかを確認する必要があります

5 、その他のカスタム エラー
変数 $error を使用して、各パラメーターが正しいかどうかを直接印刷して確認できます。上記の無効なエラー プロンプトを削除する方がはるかに便利です。


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