28

BlueImp / Jquery File Uploadを使用して、いくつかの画像をWebWebサーバーにアップロードできるようにしたいと思います。私は多くのソースを読んで生成したこの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を構成するにはどうすればよいですか、またはエラーメッセージを取得するにはどうすればよいですか？

ありがとう、オスカー

4

9 に答える 9

36

私はこれが古いスレッドであることを知っていますが、誰かがまだエラーメッセージを取得する方法を探しているなら、これを行う方法は次のとおりです。

$('#fileupload').bind('fileuploadprocessfail', function (e, data) {
    alert(data.files[data.index].error);
});
于 2013-11-16T11:44:12.907 に答える
16

このために、ファイル追加コールバックを使用してファイルを検証できます。たとえば、「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;
                    }
                });

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

詳細については、こちらをご覧ください。

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

于 2013-05-24T14:06:38.240 に答える
14

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ファイルタイプは許可されていません」というメッセージが表示されます。

于 2016-04-16T21:59:11.723 に答える
6

PHPサーバーを使用している場合は、より簡単な解決策があります。そうでない場合は、これも役立つと思います。

フロントエンドでacceptFileTypesパラメータを使用する必要はありません。次のパラメータを使用してPHPUploadHandlerクラスを初期化するだけです。

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"}
于 2013-10-06T09:47:38.233 に答える
5

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);
    }
});
于 2013-12-17T15:43:00.033 に答える
2

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

この注文は私のために働きます：

  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
于 2014-11-20T14:48:49.510 に答える
1

拡張よりもファイルタイプ（「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;
                    }
                });
于 2016-02-09T23:14:33.017 に答える
0

javascriptのエラー処理がどのように機能するかを理解するのが初めての場合は、次のトピックを読むのが最善です：try / catch（MDN）

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

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

...
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);
  }
于 2013-02-15T19:39:36.860 に答える
0

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

UIバージョンを機能させるために使用するコードをコピーしたところ、ようやくうまくいきました。'error'または'fail'メソッドを使用する代わりに、.onメソッドと'processalways'を使用してエラーをチェックします。

ビューソース： http： //blueimp.github.io/jQuery-File-Upload/basic-plus.html

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

乾杯

于 2015-08-03T16:52:24.293 に答える