jQuery プラグイン AjaxFileUpload は、Ajax ファイル Upload_jquery を実装します-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

jQuery プラグイン AjaxFileUpload は、Ajax ファイル Upload_jquery を実装します

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:02 PM

ajax ajaxfileupload jquery ファイルのアップロード

この記事の例では、参考のためにファイルのアップロードを実装するための AjaxFileUpload の具体的なコードを共有します。

jQuery プラグイン AjaxFileUpload は、ajax ファイルアップロードを実装するために使用されます。このプラグインは非常に簡単に使用できます。次に、AjaxFileUpload プラグインを使用してファイルアップロードを実装する方法を示すデモを作成します。

1. AjaxFileUpload プラグイン関連の js を紹介します

コードをコピーコードは次のとおりです:

注: テストでは、ajaxfileupload には jQuery バージョンの要件があることが判明しました。使用中は、ajaxfileupload と jQuery に対応する js バージョンが一致している必要があります。一致していないと、バージョンの競合を避けるために、ajaxfileupload 公式 Web サイトからダウンロードできます。

2. アップロード関数コード

を実装します。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/base.jsp" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <base href="<%=basePath%>">
  
  <title>ajax文件上传</title>
  
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  <meta http-equiv="expires" content="0">  
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="This is my page">
  <link rel="stylesheet" type="text/css" href="validate/ajaxfileupload.css" />
  <script type="text/javascript" src="validate/jquery-1.6.2.min.js"></script>
  <script type="text/javascript" src="validate/ajaxfileupload.js" ></script>
  <script type="text/javascript">
  $(function(){
    //上传图片
    $("#btnUpload").click(function() {
        alert(ajaxFileUpload());
    });
  });
  function ajaxFileUpload() {
    // 开始上传文件时显示一个图片
    $("#wait_loading").ajaxStart(function() {
      $(this).show();
    // 文件上传完成将图片隐藏起来
    }).ajaxComplete(function() {
      $(this).hide();
    });
    var elementIds=["flag"]; //flag为id、name属性名
    $.ajaxFileUpload({
      url: 'uploadAjax.htm', 
      type: 'post',
      secureuri: false, //一般设置为false
      fileElementId: 'file', // 上传文件的id、name属性名
      dataType: 'text', //返回值类型，一般设置为json、application/json
      elementIds: elementIds, //传递参数到服务器
      success: function(data, status){ 
        alert(data);
      },
      error: function(data, status, e){ 
        alert(e);
      }
    });
    //return false;
  }
  </script>
 </head>
 
 <body>
  <div id="wait_loading" style="padding: 50px 0 0 0;display:none;">
    <div style="width: 103px;margin: 0 auto;"><img src="<%=path %>/images/loading.gif"/></div>
    <br></br>
    <div style="width: 103px;margin: 0 auto;"><span>请稍等...</span></div>
    <br></br>
  </div>
  <input type="file" id="file" name="file"><br/>
  <input type="hidden" id="flag" name="flag" value="ajax文件上传"/>
  <input type="button" id="btnUpload" value="上传图片" />
 </body>
</html>

ログイン後にコピー

上記がこの記事の全内容です。jquery プログラミングを学習する皆さんのお役に立てれば幸いです。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

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

7393

Java チュートリアル

1630

CakePHP チュートリアル

1357

Laravel チュートリアル

1268

PHP チュートリアル

1217

Related knowledge

gRPC を使用して Golang でファイルのアップロードを実装するにはどうすればよいですか? Jun 03, 2024 pm 04:54 PM

gRPC を使用してファイルのアップロードを実装するにはどうすればよいですか?リクエストおよびレスポンスメッセージを含むサポートサービス定義を作成します。クライアントでは、アップロードされるファイルが開かれてチャンクに分割され、gRPC ストリーム経由でサーバーにストリーミングされます。サーバー側では、ファイルチャンクが受信され、ファイルに保存されます。ファイルのアップロードが完了すると、サーバーはアップロードが成功したかどうかを示す応答を送信します。

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? Feb 28, 2024 pm 03:12 PM

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQuery で PUT リクエストを送信する方法は、他のタイプのリクエストを送信する方法と似ていますが、いくつかの詳細とパラメータ設定に注意する必要があります。 PUT リクエストは通常、データベース内のデータの更新やサーバー上のファイルの更新など、リソースを更新するために使用されます。以下は、jQuery の PUT リクエストメソッドを使用した具体的なコード例です。まず、jQuery ライブラリファイルが含まれていることを確認してから、$.ajax({u

Golang関数でファイルアップロード処理を簡素化 May 02, 2024 pm 06:45 PM

回答: はい、Golang はファイルのアップロード処理を簡素化する機能を提供します。詳細: MultipartFile タイプは、ファイルのメタデータとコンテンツへのアクセスを提供します。 FormFile 関数は、フォーム要求から特定のファイルを取得します。 ParseForm 関数と ParseMultipartForm 関数は、フォームデータとマルチパートフォームデータを解析するために使用されます。これらの機能を使用すると、ファイル処理プロセスが簡素化され、開発者はビジネスロジックに集中できるようになります。

Golang でドラッグアンドドロップファイルアップロードを実装するにはどうすればよいですか? Jun 05, 2024 pm 12:48 PM

Golang でドラッグアンドドロップファイルのアップロードを実装するにはどうすればよいですか?ミドルウェアを有効にし、ファイルのアップロード要求を処理します。ドラッグアンドドロップ領域の HTML コードを作成し、ドラッグアンドドロップイベントを処理するための JavaScript コードを追加します。

Ajaxを使用してPHPメソッドから変数を取得するにはどうすればよいですか? Mar 09, 2024 pm 05:36 PM

Ajax を使用して PHP メソッドから変数を取得することは、Web 開発では一般的なシナリオであり、Ajax を使用すると、データを更新せずにページを動的に取得できます。この記事では、Ajax を使用して PHP メソッドから変数を取得する方法と、具体的なコード例を紹介します。まず、Ajax リクエストを処理し、必要な変数を返すための PHP ファイルを作成する必要があります。以下は、単純な PHP ファイル getData.php のサンプルコードです。

jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する Feb 28, 2024 pm 09:06 PM

タイトル: jQuery ヒント: ページ上のすべての a タグのテキストをすばやく変更する Web 開発では、ページ上の要素を変更したり操作したりする必要がよくあります。 jQuery を使用する場合、ページ内のすべての a タグのテキストコンテンツを一度に変更する必要がある場合があります。これにより、時間と労力を節約できます。以下では、jQuery を使用してページ上のすべての a タグのテキストをすばやく変更する方法と、具体的なコード例を紹介します。まず、jQuery ライブラリファイルを導入し、次のコードがページに導入されていることを確認する必要があります: &lt

jQuery を使用してすべての a タグのテキストコンテンツを変更する Feb 28, 2024 pm 05:42 PM

タイトル: jQuery を使用して、すべての a タグのテキストコンテンツを変更します。 jQuery は、DOM 操作を処理するために広く使用されている人気のある JavaScript ライブラリです。 Web 開発では、ページ上のリンクタグ (タグ) のテキストコンテンツを変更する必要が生じることがよくあります。この記事では、この目標を達成するために jQuery を使用する方法を説明し、具体的なコード例を示します。まず、jQuery ライブラリをページに導入する必要があります。 HTML ファイルに次のコードを追加します。

PHP と Ajax: オートコンプリート提案エンジンの構築 Jun 02, 2024 pm 08:39 PM

PHP と Ajax を使用してオートコンプリート候補エンジンを構築します。サーバー側スクリプト: Ajax リクエストを処理し、候補を返します (autocomplete.php)。クライアントスクリプト: Ajax リクエストを送信し、提案を表示します (autocomplete.js)。実際のケース: HTML ページにスクリプトを組み込み、検索入力要素の識別子を指定します。

See all articles

jQuery プラグイン AjaxFileUpload は、Ajax ファイル Upload_jquery を実装します

ホット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版

ホットトピック