更新せずにファイルをアップロードし、カスタム値を返す

この記事では、個人プロジェクトでファイルを更新せずにアップロードする問題を解決する方法と例を簡単に説明します。必要な友人は参考にしてください。

今日、開発プロセス中にこのような問題に遭遇しました。解析のために Excel をサーバーにアップロードする必要がありますが、ドキュメントが不適切な場合、ページが更新されてユーザーに次のメッセージが表示されないことを望みます。文書が不適切です。長い間一生懸命考えた後、インターネットで多くの情報を見つけ、最終的に実験に成功しました。ここで処理方法を共有します。

まず、処理のアイデアについて説明します。非表示の iframe をページに追加し、フォームの target 属性を iframe の ID に設定します。これにより、フォームが送信されると、Excel ファイルがファイル ストリームの形式でバックグラウンドに送信されます。返された情報は、バックグラウンドで受信した後に実行できます。iframe を非表示に設定する前に、iframe コンテンツの変更を監視する必要があります。カスタム処理の次のステップのために、メイン ウィンドウの JS メソッドにコンテンツを渡します。

ページのコードは次のとおりです:

<form id="input" action="importExcel.jhtml" method="post" enctype="multipart/form-data" target="hiddenIFrame">
　　<input id="excelFile" name="file" type="file" />
　　<input type="submit" class="button" value="导入excel"/>
</form>
<iframe id=&#39;hiddenIFrame&#39; name=&#39;hiddenIFrame&#39; style="display:none;"></iframe>

JS コードは次のとおりです (jqeury を導入する必要があります):

$(function(){
  $("#hiddenIFrame").load(function(){
    var wnd = this.contentWindow;
    var str = $(wnd.document.body).html();
    callback(str);
  });
})
 
function callback(info){
  alert(info);
}

従来の送信と同様に、バックグラウンドは入力コンポーネントの名前の値に基づいて同じ名前のファイル ストリームを取得します。たとえば、上記のページ コードの入力コンポーネントの名前は file で、バックグラウンドで受信したファイル ストリームは file) であり、受信後にカスタマイズされた操作を実行できます。

その他の関連チュートリアルについては、JavaScript チュートリアル

をご覧ください。