web-dev-qa-db-ja.com

blueImp / jqueryファイルアップロード-ファイルタイプが受け入れられなかった場合、エラーメッセージを取得する方法

BlueImp/Jquery File Uploadを使用して、いくつかの画像をWeb Webサーバーにアップロードできるようにします。多くのソースを読んで生成したこのJSコードがあります

 $('#file_upload').fileupload('option', {
        dataType: 'json',
        url: '/Upload/UploadFiles',
        maxFileSize: 5000000,
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
        process: [
            {
                action: 'load',
                fileTypes: /^image\/(gif|jpeg|png)$/,
                maxFileSize: 20000000 // 20MB
            },
            {
                action: 'resize',
                maxWidth: 1440,
                maxHeight: 900
            },
            {
                action: 'save'
            }
        ],
        progressall: function (e, data) {
            $(this).find('.progressbar').progressbar({ value: parseInt(data.loaded / data.total * 100, 10) });
        },
        done: function (e, data) {
            $('#show_image').append('<img src="' + data.result[0].ThumbURL + '" />');
            $('#imgID').val($('#imgID').val() + data.result[0].Id + ',');
            $(this).find('.progressbar').progressbar({ value: 100 });
        },
        error: function (e, data) {
            var a = 1;
        }
    });
});

画像ではないファイルをアップロードしないため機能しますが、エラーメッセージ（存在する場合）を取得してユーザーに表示できるようにしたいと思います。

そのデモ には、内部にエラーがあるHTMLを「魔法のように」作成するコード（jquery.fileupload-ui.jsおよびjquery.fileupload-fp.js）があります（理解するのにまだ苦労しています） ）。

これらのプラグインも使用して、生成されるHTMLを何らかの方法でカスタマイズする必要があるのか​​、手動で情報を取得してデータを取り込む方が簡単なのか、本当にわかりません。

私はJSとJqueryにかなり慣れていないので、何かが足りないかもしれません。

生成されるHTMLを構成する方法、またはエラーメッセージを取得する方法

ありがとう、オスカー

jqueryblueimp
27
JSBach

このため、ファイル追加コールバックを使用してファイルを検証できます。このように、「return false」を使用してそのファイルを追加しないようにします。

 $('#yourfileuploader').fileupload({
                    add: function (e, data) {
                        var fileType = data.files[0].name.split('.').pop(), allowdtypes = 'jpeg,jpg,png,gif';
                        if (allowdtypes.indexOf(fileType) < 0) {
                            alert('Invalid file type, aborted');
                            return false;
                        }

                    }
                });

または、このようにfileuploadaddedコールバックを登録できます。

$('#yourfileuploader').fileupload().bind('fileuploadadded', function (e, data) {
                    var fileType = data.files[0].name.split('.').pop(), allowdtypes = 'jpeg,jpg,png,gif';
                    if (allowdtypes.indexOf(fileType) < 0) {
                        alert('Invalid file type, aborted');
                        return false;
                    }
                });

また、次を使用してfileupload acceptFileTypesオプションにアクセスできます。 e.originalEvent.data.fileupload.options.acceptFileTypes

詳細はこちらをご覧ください。

https://github.com/blueimp/jQuery-File-Upload/wiki/Options

15
Sameera Millavithanachchi

私はこれが古いスレッドであることを知っていますが、エラーメッセージを取得する方法を探している人がいる場合、それを行う方法があります：

$('#fileupload').bind('fileuploadprocessfail', function (e, data) {
    alert(data.files[data.index].error);
});
34
user2999209

User2999209で述べたように、正しい方法はfileuploadprocessfailコールバックを使用することです。

彼の答えを完成させるために、もしあなたがエラーメッセージを翻訳したいなら、次の（文書化されていない）オプションを渡すべきです：

$('#my-uploader').fileupload({
    // ... some options ...
    messages : {
      maxNumberOfFiles: 'AAA Maximum number of files exceeded',
      acceptFileTypes: 'AAA File type not allowed',
      maxFileSize: 'AAA File is too large',
      minFileSize: 'AAA File is too small'
      uploadedBytes : 'AAA Uploaded bytes exceed file size'
    },
    // ... some other options ...
  })
  .on("fileuploadprocessfail", function(e, data) {
    var file = data.files[data.index];
    alert(file.error);
  });

間違ったファイルタイプのファイルをアップロードしようとすると、「AAA File type not allowed」というメッセージが表示されます。

11
Jonathan Pasquier

processfailコールバックを使用します

$('#fileupload').fileupload({
    maxFileSize: 5000000,
    done: function (e, data) {
        $.each(data.result.logo, function (index, file) {
            $('<p/>').text(file.name).appendTo('#fileupload-files');
        });
    },
    processfail: function (e, data) {
        alert(data.files[data.index].name + "\n" + data.files[data.index].error);
    }
});
5
Madhur

PHPサーバーを使用している場合は、より簡単な解決策があります。使用していない場合は、これも同様に役立つかもしれません。

フロントエンドでacceptFileTypesパラメーターを使用する必要はありません。これらのパラメータでPHP UploadHandlerクラスを初期化するだけです：

array(
    'accept_file_types' => '/\.(gif|jpe?g|png)$/i',
    'upload_url' => 'uploads/', // both of upload_url, upload_dir equals to the upload destination
    'upload_dir' => 'uploads/',
    'max_file_size' => 1024*1024*2 // in byte
)

望ましくないファイルタイプまたはファイルサイズを渡すと、ajaxの戻り値は次のようになります

{name: "Dream Come True.mp3", size: 14949044, type: "audio/mp3", error: "File type not allowed"}

または

{name: "feng (3).jpg", size: 634031, type: "image/jpeg", error: "File is too big"}
5
jchnxu

スクリプトを読み込む順序は重要ですデフォルトの検証プロセスでエラーメッセージを表示するには、

この順序は私のために働く：

  1. tmpl.min.js
  2. jquery.ui.widget.js
  3. jquery.iframe-transport.js
  4. jquery.fileupload.js
  5. jquery.fileupload-ui.js
  6. jquery.fileupload-process.js
  7. jquery.fileupload-validate.js
2
FAjir

拡張よりも、ファイルの種類（ "image/jpeg"のような形式）を検証する方が適切です。この場合、大文字と小文字を区別するなどの予期しないトラブルの潜在的な問題を回避します

$('#yourfileuploader').fileupload().bind('fileuploadadded', function (e, data) {
                    var fileType = data.files[0].type;
                    if (type.indexOf('image') < 0) {
                        alert('Invalid file type, aborted');
                        return false;
                    }
                });
1
Oleg Sh

Javascriptのエラー処理の仕組みを理解するのが初めての場合は、次のトピックを参照することをお勧めします。 try/catch（MDN）

ただし、実際にはエラーはfileuploadプロトタイプ内のメソッドであるため、理論的にはエラーが発生したときにこの関数が実行されます。

メソッドのerrorHandlerに{your code}を追加するだけです。

...
error: function (e, data) {
        var a = 1; // <--in your example, this does nothing.
        alert(e); // <--or whatever you wish to do with the error
        return a; // <--did you want to return true?
    }
...

このアラートが発生しない場合、エラーは発生しません。通常、次のコードはそれらをキャッチする方法です。 （まだこれをしていませんか？）

try {

  ...any code you want to exception handle with...

  }
  catch (e) {      
    alert(e);
  }
0
Talvi Watia

これらの回答の中に私が見つけたものは何もありませんでした、そして奇妙なことに、そのプラグインのデモを書いた開発者は、ドキュメントに記載されているものとは異なるスタイルを使用します。とにかく、それはポイントから離れています。

UIバージョンを機能させるために使用するコードをコピーしました。 「エラー」または「失敗」メソッドを使用する代わりに、.onメソッドと「processalways」を使用してエラーをチェックします。

view-source： http://blueimp.github.io/jQuery-File-Upload/basic-plus.html

これがソースコードです。

乾杯

0
Nick Res