ホームページ > 記事 > ウェブフロントエンド > AjaxFileUpload を使用してファイル アップロード ボックスを動的に追加する方法
AjaxFileUpload を使用してファイル アップロード ボックスを動的に追加する方法
- php中世界最好的语言オリジナル
- 2018-03-31 09:33:411772ブラウズ
今回は、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 サイトの他の関連記事を参照してください。