javascript - Jquery を使用して静的な javascript/ajax ファイルのアップロードを動的にする

Question

基本的に、私は長年 ajaxupload という静的ファイル アップロード スクリプトを使用してきました。私たちのニーズに合わせてわずかに編集されており、ページごとに 1 つの画像で完全に機能します。ただし、現在のスクリプトを動的にすることを望んでいた同じコードの大量を単純に複製する必要がないようにするために、1 つのページに複数の個別の画像をアップロードする必要があります。

Javascript は次のとおりです。

$(document).ready(function(){

$("#daftform").validationEngine({promptPosition : "topLeft:0,15", scroll: false}); 
                            var btnUpload=$('#upload');
                            var status=$('#swaptd');
                            new AjaxUpload(btnUpload, {
                                            action: 'upload-file-notes.php',
                                            name: 'uploadfile',
                                            onSubmit: function(file, ext){
                                                             if (! (ext && /^(jpg|png|gif|pdf|doc)$/.test(ext))){ 
                // extension is not allowed 
                                                                            status.text('File format not supported!');
                                                                            return false;
                                                            }
                                                            //status.text('Uploading...');
                                                            $('#hidebtn').hide();
                                                            $('#hideimg').show();
                                            },
                                            onComplete: function(file, response){
                                                            //alert(response);
                                                            var mytext = response.split('#');
                                                            //Add uploaded file to list
                                                            if(mytext[0]==="success"){
                                                                            str =mytext[1];
                                                                            newid = str.substring(0, str.length - 5);
                                                                            $('#myfilename').html(mytext[1]);
                                                                            document.daftform.attachments.value = mytext[1];
                                                                            $('#hidebtn').show();
                                                                            $('#hideimg').hide();
                                                            } else{
                                                                $('#myfilename').html('error had occured');
                                                            }
                                            }
                            });

            });

これは、s imple html 要素に関連しています。

<?php if (isset($_GET['change']) && $_GET['change'] == "image1"){?>
                                <tr>
                                    <td align="right">Thumbnail:</td>
                                    <td>
                                        <table>
                                            <tr>
                                                <td>
                                                    <div id="upload" >
                                                        <button id="upload" type="button">Upload</button>
                                                    </div>
                                                </td>
                                                <td id="myfilename">
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                                <?php } else { ?>
                                <tr>
                                    <td align="right">Banner:</td>
                                    <td align="left">
                                        <img src="../shop/<?php echo $subcatinforow['SubCatBan']; ?>" width="230" border="0">&nbsp;<a href="productupdate.php?change=image1&id=<?php echo $prodID; ?>"><img src="images/1001-cancel16.gif" width="16" height="16" alt="" border="0"></a>
                                        <div id="upload"></div>
                                    </td>
                                </tr>
                                <?php } ?>

ご覧のとおり、画像が「キャンセル」されると、「アップロード」として識別される div にアップロード ボタンが表示されます。これは、JavaScript が検索するものです。

上記のような複数のhtml要素をすべて異なるIDで持つことができるように、それを動的にする方法を探しています。Jquery This関数があることは承知していますが、ボタンのクリックでこれを呼び出す方法、またはこれを達成するための別の効果的な方法を誰でも提案できます。

行は基本的に次のとおりです。

var btnUpload=$('#upload');

アップロードは動的変数になる必要があります

すべてが理にかなっていることを願っています。