AJAXファイルのアップロードは本当に可能ですか？

Question

AJAXファイルのアップロードについてQ & Aを読みましたが、どれも私のために働いていません。私はChrome 59とSafari 10を使用しています。

このAJAX呼び出しで何が間違っていますか？

$(function() { 
    $('#filesubmit').submit(function(e) { 
     e.preventDefault(); 

     let file = $('#inputfile').prop('files')[0]; 
     let formData = new FormData(); 
     formData.append('file', file); 

     $.ajax({ 
      type: 'POST', 
      url: 'getArchFromNet/', 
      data: formData, 
      processData: false, 
      contentType: false, 
      cache: false, 
      success: function(response) { 
       alert('ok'); 
      } 
     }); 
    }); 
}); 

たぶん、問題は少し厄介である、私のHTMLであるが、私はそうは思わない...とにかく、ここにある：具体的に

<form action="POST" id="filesubmit" style="display:none;"> 
    <p> 
     <input id="inputfile" name="inputfile" type="file" onchange="$('#filesubmit').submit();" /> 
     <input type="submit" name="sendfile" value="sendfile" /> 
    </p> 
</form> 
<p id="net_actions"> 
    <a id="load_net" href="javascript:$('#inputfile').click();"><img src="{% static 'upload.png' %}" alt="upload a network" /></a> 
    <a id="save_net" href="saveNet/?job_id=" type="application/octet-stream"><img src="{% static 'download.png' %}" alt="download the network" /></a> 
</p> 

、私の中で何が起こりますかHTMLはこれです：ユーザが#load_netアンカーをクリックすると、ブラウザは#inputfileファイル入力をクリックします。ユーザーがファイルを選択すると、ブラウザは#sendfileサブミット入力をクリックし、JS関数がトリガーされます。

問題は、ファイルの代わりに空のペイロードが送信されていることです。私もlet file = $('#inputfile').files[0];とlet file = $('#inputfile').get(0).files[0];を使用しようとしましたが、どれも動作しません。

Answer 1

私は数日前に同じ問題がありました。 サーブレットに送信する前に、ファイルとフォームデータをシリアル化して問題を解決しました。

$.fn.serializefiles = function() { 
    var obj = $(this); 
    var formData = new FormData(); 
    $.each($(obj).find("input[type='file']"), function (i, tag) { 
     $.each($(tag)[0].files, function (i, file) 
     { 
      formData.append(tag.name, file); 
     }); 
    }); 
    var params = $(obj).serializeArray(); 
    $.each(params, function (i, val) { 
     formData.append(val.name, val.value); 
    }); 
    return formData; 
}; 

jQuery.fn.serializeObject = function() { 
    var arrayData, objectData; 
    arrayData = this.serializeArray(); 
    objectData = {}; 

    $.each(arrayData, function() { 
     var value; 

     if (this.value != null) { 
      value = this.value; 
     } else { 
      value = ''; 
     } 

     if (objectData[this.name] != null) { 
      if (!objectData[this.name].push) { 
       objectData[this.name] = [objectData[this.name]]; 
      } 
      objectData[this.name].push(value); 
     } else { 
      objectData[this.name] = value; 
     } 
    }); 

    return objectData; 
}; 

以下でメソッドを呼び出します

var serializedFormData = $("#formData").serializeObject(); 

私のAJAX呼び出しは以下の通りです：

     $.ajax({ 
         method: "POST", 
         url: urlPath, 
         processData: true, 
         dataType: "json", 
         contentType: "application/json; charset=utf-8", 
         data: JSON.stringify(serzializedFormObject) 
        }).done(function (_p) { 
        }).fail(function (xhr, status, error) { 
        }); 

たぶん選択肢は、あなたがHTML5経由BASE64にファイルオブジェクトを変換することですキャンバスリーダとそれを文字列で送信します。

Answer 2

「AJAXファイルは本当にアップロードできますか？」

はい！ビッグイエス！しかし、コーディングする方法またはコピーする方法を知っている人たち...のために：D

あなたはJavaScriptやjQueryのか、基本的に精通していない場合は、まだ成長している、それは..あなたは不可能に見えるが、私を信じて可能性がありますあなたが技術を学ぶため&テイク時間をより多くの経験となったときに自分の戦車を作ることができます..：D

あなたのコードは絶対に大丈夫ですが、犯人はhtmlコードを下回っています。あなたはこのコードが何をしているか知っている

<a id="load_net" href="javascript:$('#inputfile').click();"> 
    <img src="{% static 'upload.png' %}" alt="upload a network" /> 
</a> 

... ユーザがブラウザをすぐに実際のjQueryコードある「hrefのリファレンス・ページ」を開こうとすると、このハイパーリンク/タグ/ボタンをクリックすると、ファイル選択ポップアップが確実に開きますが、ユーザがファイルを選択するとブラウザがハング（FF）するか、jQueryエラーがヌルまたはブームブームになります!!あなたのコードが実際に実際のページにない場合jQueryスクリプトコードを開くか、ブラウザのアドレスバー/ URLバーにhrefコードを入れてください"javascript:$('#inputfile').click();"これはJavaScriptコードを実行できない理由です。コード

<a id="load_net" href="javascript:void(0);" onclick="$('#inputfile').click();"> 
    <img src="{% static 'upload.png' %}" alt="upload a network" /> 
</a> 

UpdateおよびAjaxPOSTに「file」POSTの入力を取得.. :)幸運：だから、最高のは....速く、新鮮な息を取るために、以下のようにHTMLコードを変更するだろう！