最近、画像をサーバーにアップロードできる Web サーフェス ページを開発しています。以下に、要件と実装のアイデア、および Ajax のソース コードを共有します。Ajax に興味のある友人は、Ajax と Spring を参照して実装してください。 ファイルアップロード機能!
プロジェクトのニーズに応じて、画像をサーバーにアップロードできる Web フォーム ページを開発します。
1. 要件
Webフォームページでは、フォームを通じて写真やその他のテキスト情報をアップロードできます。
2. 写真をアップロードするプロセス
この種のページをこれまでにやったことがないので、情報をクエリする必要があります。一般的な方法では、最初に画像をサーバー側のファイル ディレクトリにアップロードし、サーバーが画像の保存パスをフロント デスクに返し、次にフロント デスクが画像の保存パスとその他のフォームを送信することがわかります。情報がサーバーに送信され、すべてのフォーム情報がデータベースに保存されます。
3. 方法
プロジェクトのニーズのため、ここでは画像をアップロードする 2 つの方法を紹介します。1 つ目は、ajax を使用して画像を直接アップロードする方法で、2 つ目は、画像を前面で小さく切り取る方法です。まずデスクにファイルをアップロードし、次に ajax を使用して画像をそれぞれサーバーにアップロードすると、サーバーがファイルの結合を実現します。 (方法 2 は、より大きなファイルをアップロードする場合に適しています) 以下に 2 つの方法をそれぞれ紹介します。
方法 1:
1 HTML ページを直接アップロードします
<pre name="code" class="html"><!DOCTYPE html> <head></head> <body> <form id="uploadForm" action="/PicSubmit/form" method="post" enctype="multipart/form-data" onsubmit="return submit_check()" class="bootstrap-frm" >
<input id = "sid" type = "text" name="name" />
<pre name="code" class="html"><input id = "fileImage" type = "file" name="filename" />
<input id = "addressid" type = "hidden" name="address" />
<input id="ajaxsub" type="button" class="button" value="上传图片" onclick="fileUpload()<span style="font-family: Arial, Helvetica, sans-serif;">" /> </span>
<input type="submit" class="button" value="提交表单" /> <input type="reset" class="button" value="重置表单" />