9

プラグインは次のとおりです：https ：//github.com/blueimp/jQuery-File-Upload

ファイルをアップロードした後、プラグインから必要な応答を取得するのに問題があります。

プラグインのあるページには、次のものがあります

$('#fileupload').fileupload(
    'option',
    {
        'maxNumberOfFiles' :1,
        'url' : '/admin/upload_handler.php'
    }
);

で、upload_handler.phpアップロードされたファイルを$ _FILESから正常に取得して処理を行い、JSONで応答を送り返します。Firebugを使用して、応答が適切な形式であることを確認しました。

[ 
    {                
        "url" : "image_url",
        "thumbnail_url" : "image_th_url",
         "delete_url" : "test",
         "delete_type" : "DELETE",
         "name" : "foobar.jpg",
         "size" : 7419
     }
]

しかし、コールバックはファイル配列を見つけることができず、「空のファイルアップロード結果」というエラーが表示されます。ここで重要な何かが欠けているように感じます-ドキュメント、フォーラム、またはStackOverflowで何も見つかりません。助けていただければ幸いです。

4

7 に答える 7

4

プラグインのバージョン5以降、jsonの応答が変更されました：https ：//github.com/blueimp/jQuery-File-Upload/wiki/JSON-Response

したがって、アップロードクラスを次のように微調整するだけです。

$filejson = new stdClass();
$filejson->files[] = $fileArray;
return json_encode($filejson);

そして、あなたは完了です

于 2013-07-26T22:48:14.413 に答える
4

返品は、次のようにファイル配列で囲む必要があります。

    {"files": [
      {
        "name": "picture1.jpg",
        "size": 902604,
        "url": "http:\/\/example.org\/files\/picture1.jpg",
        "thumbnailUrl": "http:\/\/example.org\/files\/thumbnail\/picture1.jpg",
        "deleteUrl": "http:\/\/example.org\/files\/picture1.jpg",
        "deleteType": "DELETE"
      },
      {
        "name": "picture2.jpg",
        "size": 841946,
        "url": "http:\/\/example.org\/files\/picture2.jpg",
        "thumbnailUrl": "http:\/\/example.org\/files\/thumbnail\/picture2.jpg",
        "deleteUrl": "http:\/\/example.org\/files\/picture2.jpg",
        "deleteType": "DELETE"
      }
    ]}

特に、要件は次のとおりです。Note that the response should always be a JSON object containing a files array even if only one file is uploaded.

経由:: https ://github.com/blueimp/jQuery-File-Upload/wiki/Setup#using-jquery-file-upload-ui-version-with-a-custom-server-side-upload-handler

于 2015-01-20T03:48:39.030 に答える
2

「空のファイルアップロード結果」は、<tr class = "template-upload fail"> HTMLタグの外側にあるテンプレートにHTML（およびプログラム結果DOM）オブジェクトを追加するときに発生します。例：別の<を追加するとします。 tr>テンプレートへ

これにより、ファイルが正しくアップロードされ、アップロードされたファイルごとに「空のファイルアップロード結果」が1回表示されます。

JSテンプレートエンジンで何かをしなければならないようです。

これは、128行目の直後のjquery.fileupload-ui、jsで修正できます。

元のコード：

    // Callback for successful uploads:
done: function (e, data) {
    var that = $(this).data('blueimp-fileupload') ||
            $(this).data('fileupload'),
        files = that._getFilesFromResponse(data),
        template,
        deferred;
    if (data.context) {
        data.context.each(function (index) { // LINE 128
            var file = files[index] ||
                    {error: 'Empty file upload result'},
                deferred = that._addFinishedDeferreds();

128行目の後に次のコードを追加します。

if (!$(data.context[index]).hasClass(that.options.uploadTemplateId)) { return true; }

結果のコード：

    // Callback for successful uploads:
done: function (e, data) {
    var that = $(this).data('blueimp-fileupload') ||
            $(this).data('fileupload'),
        files = that._getFilesFromResponse(data),
        template,
        deferred;
    if (data.context) {
        data.context.each(function (index) { //LINE 128
            if (!$(data.context[index]).hasClass(that.options.uploadTemplateId)) { return true; } // YOUR ADDED LINE
            var file = files[index] ||
                    {error: 'Empty file upload result'},
                deferred = that._addFinishedDeferreds();

これが他の人に役立つことを願っています:)

于 2013-05-21T12:08:32.193 に答える
0

OK、これはjQueryの問題ではなく、サーバー側の問題のようです。私の場合、これはPHPスクリプトであり、次のように調整する必要がありました。

関数post（）を参照して、この行を編集してください

$json = json_encode($info);

に

$json = json_encode(array($this->options['param_name'] =>$info));

また、関数の最後の行のエコーも編集する必要がありました。それ以外の

echo $json;

今あります

echo str_replace('\/','/',$json);

正しいjson配列を返すことは問題なく機能しているようです。それが役に立てば幸い。

于 2013-01-16T08:53:11.283 に答える
0

私の場合、jquery.fileupload-ui.jsファイルを変更して、JSONの結果を直接検索しました。

このスニペットを変更する

  if (data.context) {
                    data.context.each(function (index) {
                        var file = files[index] ||
                                {error: 'Empty file upload result'};//CHANGE
                        deferred = that._addFinishedDeferreds();
                        that._transition($(this)).done(
                            function () {

これに

  if (data.context) {
                    data.context.each(function (index) {
                        var file = data._response.result[index] ||
                                {error: 'Empty file upload result'};//TO THIS
                        deferred = that._addFinishedDeferreds();
                        that._transition($(this)).done(
                            function () {

于 2015-07-17T16:51:47.183 に答える
0

前に述べたように、これはサーバーの応答がプラグインが期待するものではないために発生します（これはここに示されているファイル配列です）。バックエンドを変更したくない（または変更できない）場合の解決策は、応答の結果オブジェクトを、プラグインが期待する結果オブジェクト（ファイル配列を含む）に置き換えることです。

これは、fileuploaddoneイベントで実行できます。

アップロードが完了すると、これがサーバーから返されるJSON応答であると想定します。 ここに画像の説明を入力してください

data.resultは、サーバーの応答を保持します。

.bind('fileuploaddone', function(e, data) {
    //this will now contains the server response 
    //as per the attached image: an array of elements
    data.result;
});

結果オブジェクトを、blueimpプラグインで解析できる新しいオブジェクトに置き換えたいので、定義しましょう（注：これは、プラグインのドキュメントにあるように、ファイルの配列を含むオブジェクトです）。

//tempFolder is optional
var filesUploaded = { "files": [], "tempFolder": null };

結果オブジェクトの置き換え：

.bind('fileuploaddone', function(e, data) {
    //creating a file object in the format the jquery plugin is expecting
    var file = {
        deleteType: "DELETE",
        deleteUrl:"#",
        type: data.result[0].MimeType,
        thumbnailUrl : "#",
        url: "#",
        name: data.result[0].Name,
        size: data.result[0].Size
    }

    //adding it to the file list
    filesUploaded.files.push(file);
    data.result = null;
    //replacing the server response with the 'custom' one we just created
    data.result = filesUploaded;
});

プラグインは、期待されるJSONスキーマを解析し、「空のファイルアップロード結果」メッセージが表示されなくなるため、正常にレンダリングされるはずです。

于 2017-02-28T17:19:24.653 に答える
0

私にとっては、アップロードファイルのサイズでした。私はそれらのphp.iniパラメータを調整しました：

  • memory_limit
  • post_max_size
  • upload_max_filesize
  • max_file_uploads
于 2021-09-06T15:25:58.720 に答える