シンプルな jQuery プラグイン ajaxfileupload.js は、Ajax アップロード ファイル example_jquery を実装します。

jQuery プラグイン AjaxFileUpload は、Ajax ファイルのアップロードを実現できます。このプラグインは非常に簡単に使用できます。まず、AjaxFileUpload プラグインの正しい使用方法を学び、次に、いくつかの一般的なエラー メッセージと解決策について学びます。

使用説明書

jQuery ライブラリ ファイルと AjaxFileUpload ライブラリ ファイルを使用する必要があります

使用例

1、ファイル部分

を含む

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

98a409b4e0dd20993c98e99a88ced0d82cacc6d41bbb37262a98f745aa00fbf0
c1a507ce4e25efe7d9a05acf2ed209252cacc6d41bbb37262a98f745aa00fbf0

2. HTML 部分

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

89b25275b4a8bb4532c41a2aa8161b05 11091c232b6ac165cead5133eec293a5 bec745fb82b804114c56a91be37fec35アップロード65281c5ac262bf6d81768915a4a77ac0


必要な要素は、動的読み込みアイコン、ファイル フィールド、ボタンの 3 つだけです

注: AjaxFileUpload プラグインを使用してファイルをアップロードする場合、次のようにフォームは必要ありません:

81fdc12b3e5a7c94f0fb7543d39812ad

AjaxFileUpload プラグインがフォーム送信フォームを自動的に生成するためです。

ファイルのドメイン ID と名前については、ajaxFileUpload プラグインの fileElementId パラメーターでファイル ドメイン ID を取得する必要があります。ファイルのアップロード操作を処理する場合は、ファイル ドメイン名を取得する必要があります。アップロードされたファイル情報は明確でなければなりません。

3、JavaScript 部分

主なパラメータの説明:

<script type="text/javascript"> 
function ajaxFileUpload (){ 
loading();//动态加载小图标 
$.ajaxFileUpload ({ 
url :'upload.php', 
secureuri :false, 
fileElementId :'fileToUpload', 
dataType : 'json', 
success : function (data, status){ 
if(typeof(data.error) != 'undefined'){ 
if(data.error != ''){ 
alert(data.error); 
}else{ 
alert(data.msg); 
} 
} 
}, 
error: function (data, status, e){ 
alert(e); 
} 
}) 
return false; 
} 
function loading (){ 
$("#loading ").ajaxStart(function(){ 
$(this).show(); 
}).ajaxComplete(function(){ 
$(this).hide(); 
}); 
} 
</script> 

1. url は、ファイルのアップロード操作を処理するためのファイル パスを表します。上記のように、URL がブラウザで直接アクセスできるかどうかをテストできます。 2. fileElementId は、上記のようにファイル ドメイン ID を表します: fileToUpload

3. secureuri が安全な送信を有効にするかどうか、デフォルトは false

4. dataType データ、通常は JavaScript の本来の生態である json を選択します
5. 送信成功後の処理機能
6. エラー送信失敗処理関数

上記には 2 つのメソッドがあります。動的読み込みの小さなアイコン プロンプト関数のloading() と、使用する jQuery.ajax() 関数に似た ajaxFileUpload ファイルのアップロード $.ajaxFileUpload() 関数です。使い方は非常に簡単です。ここでは省略しましたが、PHP はアップロードされたファイルを処理します。jQuery プラグイン AjaxFileUpload を使用して ajax ファイルを実装するのはとても簡単です。

同時に、関連するエラー プロンプトを知る必要があります

1、構文エラー: ステートメントエラーの前に欠落しています

このエラーが発生した場合は、URL パスにアクセスできるかどうかを確認する必要があります

2、SyntaxError: 構文エラー

このエラーが発生した場合は、送信操作を処理する PHP ファイルに構文エラーがあるかどうかを確認する必要があります

3、SyntaxError: 無効なプロパティ ID エラー

このエラーが発生した場合は、属性 ID が存在するかどうかを確認する必要があります

4、SyntaxError: XML 式エラーに } がありません

このエラーが発生した場合は、ファイルのドメイン名が一致しているか、存在していないかを確認する必要があります

5、その他のカスタム エラー

変数 $error を使用して直接出力し、各パラメーターが正しいかどうかを確認できます。これは、上記の無効なエラー プロンプトよりもはるかに便利です。

jQuery プラグイン AjaxFileUpload を使用して、更新せずにファイルをアップロードすることは非常に実用的であり、そのシンプルさと使いやすさにより、このプラグインは他のファイル アップロード プラグインと比較して最も多くのユーザーを抱えています。強くお勧めします。

処理中のページ:

他のネチズンからの追加コメント:

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;

public partial class web_ajax_FileUpload : System.Web.UI.Page
{
 protected void Page_Load(object sender, EventArgs e)
 {
  HttpFileCollection files = HttpContext.Current.Request.Files;


  //if (files[0].ContentLength > 5)
  //{
  // Response.Write("{");
  // Response.Write("msg:'" + files[0].FileName + "',");
  // Response.Write("error:'文件上传失败'");
  // Response.Write("}");
  //}
  //else
  //{
  // Response.Write("{");
  // Response.Write("msg:'没有文件被上传',");
  // Response.Write("error:'文件上传失败'");
  // Response.Write("}");
  //}
  files[0].SaveAs("d:/adw.jpg");
  Response.Write("{");
  Response.Write("msg:'a',");
  Response.Write("error:''");
  Response.Write("}");

  //Response.Write("{");
  //Response.Write("msg:'ggg\n',");
  //Response.Write("error:'aa\n'");
  //Response.Write("}");
  Response.End();
 }
}

ページコード:

コードをコピー

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

100db36a723c770d327fc0aef2ce13b1
c82d624dc9225c3683058f24dde5f69f
0c54930bea48f598f730c6be244850d72cacc6d41bbb37262a98f745aa00fbf0
a787e67392ba4615922d8cf7af8591d02cacc6d41bbb37262a98f745aa00fbf0

1906939e5ea27865e328dca91efd6f19
4ec11beb6c39d0703d1751d203c17053
関数 ajaxFileUpload(){
$.ajaxFileUpload(
{
URL: 'update.do? Method = Uploader', // サーバーアドレスにリンクする必要があります
secureuri:false,
FileElementid: 'Housemaps', // ファイル選択ボックスの ID 属性
データ型: 'xml'、'xml' 成功：関数（データ、ステータス）                                                                                   $('#result').html('正常に追加されました');
},
エラー: Function (data, status, e) // 同等 {
$('#result').html('追加に失敗しました');
}
}
                                                                          );
                                                                      }
2cacc6d41bbb37262a98f745aa00fbf0
a586015c911220733e5a6cecfcc3f07b

7179caff31ba7967e99850a4aa2c3bdf bb12889be9509b7c88109280a7655834 5481467d3c96c8c4e590f8e17fa2b649
264c8b0e0a1db44ba947f405b03bda4d
fc1a2a1680034d9749864694ddf66ad416b28748ea4df4d9c2150843fecfba68

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e



サーバーコード:

コードをコピー

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

public class UpdateAction extends DispatchAction {

public ActionForward アップローダー(ActionMapping マッピング、ActionForm フォーム、
            HttpServletRequest リクエスト、HttpServletResponse レスポンス) {
        UpFormForm upFormForm = (UpFormForm) フォーム;
        FormFile ff = upFormForm.getHouseMaps();
        {
を試してください             入力ストリームは = ff.getInputStream();
            ファイル file = new File("D:/" ff.getFileName());            // ファイルが保存されている経路とファイル名を指定します
            OutputStream os = new FileOutputStream(file);
           
            byte[] b = 新しいバイト[1024];
            int len = 0;
            while((len = is.read(b)) != -1){
                os.write(b, 0, len);
            }
            os.close();
            is.close();
        } catch (例外 e) {
            e.printStackTrace();
           
        }
       
        null を返す;
    }
}