FormData がファイルをアップロードするための Ajax リクエストを実装する方法 (コードが添付されている)-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

FormData がファイルをアップロードするための Ajax リクエストを実装する方法 (コードが添付されている)

不言

Aug 15, 2018 am 10:55 AM

この記事の内容は、FormData がファイルをアップロードするための Ajax リクエストを実装する方法に関するものです。必要な方は参考にしていただければ幸いです。

Servlet3.0 は、サーブレット、フィルター、リスナーなどを構成するための一連のアノテーションを提供し始めました。この方法により、開発中の大量の XML の構成を大幅に簡素化できます。このバージョンから、web.xml は必要なくなり、関連するアノテーションを使用して対応する設定を完了することもできます。

a.アップロードを選択

b:背景表示

c:アップロードされたフォルダー

htmlコード:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Ajax上传</title>
    <script src="js/jquery-1.12.4.js"></script></head><body>
    <h1>文件上传</h1>
    <form id="f" enctype="multipart/form-data">
        UserName:<input type="text" name="userName"><br/>
        File1:<input type="file" name="file"><br/>
        File2:<input type="file" name="file"><br/>
        <input type="button" id="btn" value="提交">
    </form></body><script>
    $(function () {
        $("#btn").on("click",function () {            
        //使用FormData对象来提交整个表单，它支持文件的上传
            var formData=new FormData(document.getElementById("f"));            
            //额外带来一些数据            
            formData.append("age",14);            
            //使用ajax提交            
            $.ajax("ajaxUpload",{
                type:"post",
                data:formData,
                processData:false,//告诉jquery不要去处理请求的数据格式                
                contentType:false,//告诉jquery不要设置请求头的类型                
                success:function (data) {
                    alert(data);
                }
            });
        })
    })
    </script>
    </html>

ログイン後にコピー

Java背景コード:

@WebServlet("/ajaxUpload")
@MultipartConfig //开启上传功能/**
 * @author hh */
 public class FileUploadServlet extends HttpServlet {
    @Override    
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");        
        //获取用户名
        String userName=req.getParameter("userName");        
        //获取年龄
        String age=req.getParameter("age");
        System.out.println(userName);
        System.out.println(age);        
        //获取项目部署的绝对路径
        String uploadPath=req.getServletContext().getRealPath("/photos");        
        //构建上传的文件夹
        File dir=new File(uploadPath);        
        if(!dir.exists()){
            dir.mkdir();
        }        
        //获取所有上传的Part
       Collection<Part> parts= req.getParts();        
       for (Part part:parts) {            
       //判断上传的类型是否为空，如果为空则不执行上传
            if(part.getContentType()!=null){                
            //获取文件名
                String fileName=part.getSubmittedFileName();                
                //执行上传
                part.write(uploadPath+File.separator+fileName);
            }
        }        
        //响应上传成功
        resp.getWriter().println("uplaod success");
    }
}

ログイン後にコピー

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7450

CakePHP チュートリアル

1374

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScript文字列置換法とFAQの詳細な説明この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します：内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します最も直接的な方法は、置換（）メソッドを使用することです。 str = str.replace（ "find"、 "置換"）; この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace（/fi

独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか？ Mar 18, 2025 pm 03:12 PM

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか？ Mar 18, 2025 pm 03:14 PM

この記事では、ブラウザでJavaScriptのパフォーマンスを最適化するための戦略について説明し、実行時間の短縮、ページの負荷速度への影響を最小限に抑えることに焦点を当てています。

ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか？ Mar 18, 2025 pm 03:16 PM

この記事では、ブラウザ開発者ツールを使用した効果的なJavaScriptデバッグについて説明し、ブレークポイントの設定、コンソールの使用、パフォーマンスの分析に焦点を当てています。

jQueryマトリックス効果 Mar 10, 2025 am 12:52 AM

マトリックスの映画効果をあなたのページにもたらしましょう！これは、有名な映画「The Matrix」に基づいたクールなJQueryプラグインです。プラグインは、映画の古典的な緑色のキャラクター効果をシミュレートし、画像を選択するだけで、プラグインはそれを数値文字で満たされたマトリックススタイルの画像に変換します。来て、それを試してみてください、それはとても面白いです！それがどのように機能するかプラグインは画像をキャンバスにロードし、ピクセルと色の値を読み取ります。 data = ctx.getimagedata（x、y、settings.greasize、settings.greasize）.data プラグインは、写真の長方形の領域を巧みに読み取り、jQueryを使用して各領域の平均色を計算します。次に、使用します

jQueryのパフォーマンスを即座に増やす10の方法 Mar 11, 2025 am 12:15 AM

この記事では、スクリプトのパフォーマンスを大幅に向上させるための10の簡単な手順の概要を説明します。これらの手法は簡単で、すべてのスキルレベルに適用できます。更新の維持：NPMのようなパッケージマネージャーを使用して、Viteなどのバンドラーを使用して確認してください

シンプルなjQueryスライダーを構築する方法 Mar 11, 2025 am 12:19 AM

この記事では、jQueryライブラリを使用してシンプルな画像カルーセルを作成するように導きます。 jQuery上に構築されたBXSLiderライブラリを使用し、カルーセルをセットアップするために多くの構成オプションを提供します。今日、絵のカルーセルはウェブサイトで必須の機能になっています - 1つの写真は千の言葉よりも優れています！画像カルーセルを使用することを決定した後、次の質問はそれを作成する方法です。まず、高品質の高解像度の写真を収集する必要があります。次に、HTMLとJavaScriptコードを使用して画像カルーセルを作成する必要があります。ウェブ上には、さまざまな方法でカルーセルを作成するのに役立つ多くのライブラリがあります。オープンソースBXSLiderライブラリを使用します。 BXSLiderライブラリはレスポンシブデザインをサポートしているため、このライブラリで構築されたカルーセルは任意のものに適合させることができます

JavaScriptによる構造マークアップの強化 Mar 10, 2025 am 12:18 AM

キーポイントJavaScriptを使用した構造的なタグ付けの強化は、ファイルサイズを削減しながら、Webページコンテンツのアクセシビリティと保守性を大幅に向上させることができます。 JavaScriptを効果的に使用して、Cite属性を使用して参照リンクを自動的にブロック参照に挿入するなど、HTML要素に機能を動的に追加できます。 JavaScriptを構造化されたタグと統合することで、ページの更新を必要としないタブパネルなどの動的なユーザーインターフェイスを作成できます。 JavaScriptの強化がWebページの基本的な機能を妨げないようにすることが重要です。高度なJavaScriptテクノロジーを使用できます（

See all articles

FormData がファイルをアップロードするための Ajax リクエストを実装する方法 (コードが添付されている)

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック