AjaxFileUpload を使用してファイル アップロード ボックスを動的に追加する方法
今回は、AjaxFileUpload が動的にファイル アップロードボックスを追加する方法と、AjaxFileUpload が動的にファイル アップロード ボックスを追加する際の注意点について説明します。実際のケースを見てみましょう。
しかし、ファイルの数が固定されているだけなので、需要がファイルの数を不明な場合は、柔軟性を実現するためにファイル アップロード ボックスを動的に追加する必要があります。
前回の記事の基本フレームワークをベースに、主に以下の点が変更されています
1. ファイルアップロードボックスの動的追加と削除を行うためのjQuery
2.3. ajaxfileupload.js で ID 配列を必要な Object 配列に変換します
上記の問題を順番に解決します
1. ファイルアップロードボックスの動的な追加と削除を実現します <body>
<form action="" enctype="multipart/form-data">
<h2>
多文件上传
</h2>
<input type="file" id="file1" name="file" /><a id="add" href="javascript:void();" rel="external nofollow" onclick="addFile();">添加</a>
<span>
<table id="down">
</table>
</span>
</br>
<input type="button" onclick="fileUpload();" value="上传">
</form>
</body>
<script type="text/javascript">
//添加附件
function addFile(){
var fileLength = $("input[name=file]").length+1;
var inputFile = "<p id='addFile"+fileLength+"'><input type='file' id='file"+fileLength+"' name='file' />"
+"<a href='javascript:void();' onclick='delFile("+fileLength+");'>删除</a></p>";
$("#add").after(inputFile);
}
//删除附件
function delFile(id){
$("#addFile"+id).remove();
}
</script>
2.ファイルアップロードボックスのIDアップロードボックスがいくつあるかわからないので、アップロードボックスが追加されるたびに、そのid属性がfile1、file2の形でインクリメントされます
各ループを使用できます文字を結合するには
var files = "";
//获取所有 <input type="file" id="file1" name="file" /> 的ID属性值
$("input[name=file]").each(function(){
files = files + $(this).attr("id")+",";
})
//将字符最后一逗号(,)截取掉
files = files.substring(0,files.length-1);その後、取得するファイルの値は次のようになります: var files = "file1,file2,file3";
console.info(typeof(files) ); ファイルを文字列型として表示しますvar files = "file1,file2,file3";
可以使用console.info(typeof(files));查看files为string类型
三、ajaxfileupload.js里将ID数组转换为需要的Object数组
因为我们需要的是诸如var files = ['file1','file2','file3'];
而不是var files = "file1,file2,file3";
var files = [ のようなものであるためです。 <code>var files = "file1, file2, file3"; の代わりに 'file1','file2','file3']; したがって、実際には変換する必要があります。 , ajaxfileupload.jsで行う必要はありません
ID取得時に完全に変換してから値を渡すことができます。場所は関係ありません、方法は同じです。
まだ次のコードが見つかります:
var oldElement = jQuery('#' + fileElementId);
var newElement = jQuery(oldElement).clone();
jQuery(oldElement).attr('id', fileId);
jQuery(oldElement).before(newElement);
jQuery(oldElement).appendTo(form);このコードの上に次のコードを追加します:
var t = '';
if(typeof(fileElementId) == 'string'){
/*
* 将传过来的值 如："file1,file2,file3" 转换为：['file1','file2','file3']
*/
var s = fileElementId.split(",");
for(var i in s){
t = t + "'"+s[i]+"'"+",";
}
t = "["+t+"]";
t = t.replace(",]", "]")
}
fileElementId= eval('('+ t +')'); //将string类型转换为Object类型 この記事のケースを読んだ後は、この方法を習得したと思います。さらにエキサイティングな内容については、php 中国語 Web サイトに注目してください。その他の関連記事もご覧ください。 推奨読書:
以上がAjaxFileUpload を使用してファイル アップロード ボックスを動的に追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7319
9
1625
14
1349
46
1261
25
1209
29
期限切れの WeChat ファイルを復元する方法? 期限切れの WeChat ファイルは復元できますか?
Feb 22, 2024 pm 02:46 PM
WeChat を開き、[自分の設定] を選択し、[一般] を選択してから [記憶域スペース] を選択し、[記憶域スペース] で [管理] を選択し、ファイルを復元する会話を選択して、感嘆符アイコンを選択します。チュートリアル 適用モデル: iPhone13 システム: iOS15.3 バージョン: WeChat 8.0.24 分析 1 まず、WeChat を開き、マイページの [設定] オプションをクリックします。 2 次に、設定ページで [一般オプション] を見つけてクリックします。 3次に、一般ページで「記憶域スペース」をクリックします。 4 次に、ストレージスペースページで「管理」をクリックします。 5最後に、ファイルを回復したい会話を選択し、右側の感嘆符アイコンをクリックします。補足: WeChat ファイルの有効期限は通常、数日です。WeChat で受信したファイルがクリックされなかった場合、WeChat システムは 72 時間後にそのファイルを消去します。WeChat ファイルが閲覧された場合、
形式がサポートされていないか、ファイルが破損しているため、写真ではこのファイルを開けません
Feb 22, 2024 am 09:49 AM
Windows では、フォト アプリは写真やビデオを表示および管理するのに便利な方法です。このアプリケーションを通じて、ユーザーは追加のソフトウェアをインストールすることなく、マルチメディア ファイルに簡単にアクセスできます。ただし、写真アプリの使用時に「形式がサポートされていないため、このファイルを開けません」というエラー メッセージが表示されたり、写真やビデオを開こうとしたときにファイルが破損したりするなど、ユーザーが何らかの問題に遭遇することがあります。この状況はユーザーにとって混乱を招き不便になる可能性があり、問題を解決するには調査と修正が必要になります。ユーザーが写真アプリで写真またはビデオを開こうとすると、次のエラーが表示されます。申し訳ありませんが、この形式が現在サポートされていないか、ファイルがサポートされていないため、フォトではこのファイルを開くことができません
Tmp形式のファイルは削除できますか?
Feb 24, 2024 pm 04:33 PM
tmp 形式ファイルは、通常、コンピュータ システムまたはプログラムの実行中に生成される一時ファイル形式です。これらのファイルの目的は、プログラムを適切に実行したり、パフォーマンスを向上させるために一時データを保存することです。プログラムの実行が完了するか、コンピュータが再起動されると、多くの場合、これらの tmp ファイルは必要なくなります。したがって、Tmp 形式のファイルは基本的に削除可能です。さらに、これらの tmp ファイルを削除すると、ハード ディスクの空き容量が確保され、コンピュータが正常に動作するようになります。ただし、Tmp 形式のファイルを削除する前に、次のことを行う必要があります。
Quark Cloud Disk から Baidu Cloud Disk にファイルを転送するにはどうすればよいですか?
Mar 14, 2024 pm 02:07 PM
Quark Netdisk と Baidu Netdisk は現在、ファイルの保存に最も一般的に使用されている Netdisk ソフトウェアです。Quark Netdisk 内のファイルを Baidu Netdisk に保存したい場合は、どうすればよいですか?今回は、Quark Network Disk コンピュータから Baidu Network Disk にファイルを転送するためのチュートリアル手順を編集者がまとめたので、その操作方法を見てみましょう。 QuarkネットワークディスクファイルをBaiduネットワークディスクに保存するにはどうすればよいですか? Quark Network Disk から Baidu Network Disk にファイルを転送するには、まず Quark Network Disk から必要なファイルをダウンロードし、次に Baidu Network Disk クライアントでターゲット フォルダーを選択して開きます。次に、Quark Cloud Disk からダウンロードしたファイルを Baidu Cloud Disk クライアントによって開かれたフォルダーにドラッグ アンド ドロップするか、アップロード機能を使用してファイルを Baidu Cloud Disk に追加します。アップロードが完了したら、Baidu Cloud Disk にファイルが正常に転送されたかどうかを必ず確認してください。それでおしまい
0x80004005 エラー コードが表示された場合の対処方法 エディターは、0x80004005 エラー コードを解決する方法を説明します。
Mar 21, 2024 pm 09:17 PM
パソコン上のフォルダーを削除または解凍するときに、「エラー 0x80004005: 不明なエラー」というダイアログ ボックスが表示されることがあります。この状況はどう解決すればよいでしょうか?エラー コード 0x80004005 が表示される理由は実際にはたくさんありますが、そのほとんどはウイルスによって引き起こされます。DLL を再登録して問題を解決できます。以下では、エディターがエラー コード 0x80004005 の処理体験を説明します。 。一部のユーザーは、コンピュータの使用時にエラー コード 0X80004005 を表示されます。0x80004005 エラーは主に、コンピュータが特定のダイナミック リンク ライブラリ ファイルを正しく登録していないこと、またはファイアウォールがコンピュータとインターネット間の HTTPS 接続を許可していないことが原因で発生します。それでどうですか
hiberfil.sys ファイルとは何ですか? hiberfil.sysは削除できますか?
Mar 15, 2024 am 09:49 AM
最近、多くのネチズンが編集者に「hiberfil.sys ファイルとは何ですか?」と尋ねました。 hiberfil.sys は C ドライブのスペースを多く消費し、削除される可能性がありますか?エディターは、hiberfil.sys ファイルを削除できることを通知します。以下で詳細を見てみましょう。 hiberfil.sys は Windows システムの隠しファイルであり、システム休止状態ファイルでもあります。通常、C ドライブのルート ディレクトリに保存され、そのサイズはシステムに搭載されているメモリのサイズと同等です。このファイルはコンピュータが休止状態になっているときに使用され、リカバリ中に以前の状態にすばやく復元できるように、現在のシステムのメモリ データが含まれています。そのサイズはメモリ容量と等しいため、より多くのハードドライブスペースを占有する可能性があります。冬休み
Mijia にテレビを追加する方法
Mar 25, 2024 pm 05:00 PM
多くのユーザーは、現代生活において Xiaomi スマート ホーム相互接続の電子エコシステムをますます支持しています。Mijia APP に接続した後、携帯電話で接続されたデバイスを簡単に制御できます。しかし、多くのユーザーはまだ Mijia を追加する方法を知りません。このチュートリアル ガイドでは、困っているすべての人を助けるために、具体的な接続方法と手順を説明します。 1. Mijia APPをダウンロードした後、Xiaomi アカウントを作成またはログインします。 2. 追加方法: 新しいデバイスの電源を入れた後、携帯電話をデバイスに近づけて Xiaomi TV の電源を入れます。通常の状況では、接続プロンプトがポップアップ表示されます。「OK」を選択してデバイスの接続プロセスに入ります。プロンプトが表示されない場合は、スマート ホーム APP に入った後、左下の 1 番目のボタンをクリックしてデバイスを手動で追加することもできます。
ファイルパスでのスラッシュとバックスラッシュのさまざまな使用法
Feb 26, 2024 pm 04:36 PM
ファイル パスは、ファイルまたはフォルダーを識別して検索するためにオペレーティング システムによって使用される文字列です。ファイル パスには、パスを区切る 2 つの一般的な記号、つまりスラッシュ (/) とバックスラッシュ () があります。これら 2 つのシンボルは、オペレーティング システムごとに異なる用途と意味を持ちます。スラッシュ (/) は、Unix および Linux システムで一般的に使用されるパス区切り文字です。これらのシステムでは、ファイル パスはルート ディレクトリ (/) から始まり、各ディレクトリ間はスラッシュで区切られます。たとえば、パス /home/user/Document
