0

私はファイルのアップロードを持っています、それはいくつかのことをしますが、主に

  1. iframeを使用してajaxをシミュレートします（ajaxはファイルデータを処理できません。少なくともクロスブラウザーでは処理できません）
  2. 必要に応じて新しいアップロード入力を作成（クローン）し、不要な場合は削除します
  3. 複数のファイルを同時にアップロードできるようにします（複数のiframeを使用）

私が抱えている問題は、現時点では4つのiframeを使用していることですが、4つのiframeを作成する必要があり、それぞれに長いコードがあります。コードは同じことをしますが、異なる変数名/IDを使用するだけです。等

可能であれば、必要に応じて（つまり、4つ以上のファイルが同時にアップロードされている場合）追加のiframeを作成するために、誰かが私のコードを単純化するのを手伝ってくれることを望んでいました。

コードはかなり長く、iveはそれを（うまくいけば）あなたたちが必要とするものに戻したので、HTML：

<iframe id="upload_target1" name="upload_target1" class="upload-target" current="current"></iframe>
<iframe id="upload_target2" name="upload_target2" class="upload-target" current="no"></iframe>
<iframe id="upload_target3" name="upload_target3" class="upload-target" current="no"></iframe>
<iframe id="upload_target4" name="upload_target4" class="upload-target" current="no"></iframe>

iframeを介して送信するフォームを処理し、ターゲットiframeを設定し、データを返すときに使用される変数を設定するjQuery：

var $fi = $visible.find(".file-info");
        if($('#upload_target1').attr('current') == 'current'){
            $('.file-upload-form').attr('target','upload_target2');
            $('#upload_target1').attr('current','no');
            $('#upload_target2').attr('current','current');
            thisPreview2 = $fi.prev(".image-preview");
        }else if($('#upload_target2').attr('current') == 'current'){
            $('.file-upload-form').attr('target','upload_target3');
            $('#upload_target2').attr('current','no');
            $('#upload_target3').attr('current','current');
            thisPreview3 = $fi.prev(".image-preview");
        }else if($('#upload_target3').attr('current') == 'current'){
            $('.file-upload-form').attr('target','upload_target4');
            $('#upload_target3').attr('current','no');
            $('#upload_target4').attr('current','current');
            thisPreview4 = $fi.prev(".image-preview");
        }else{
            $('.file-upload-form').attr('target','upload_target1');
            $('#upload_target4').attr('current','no');
            $('#upload_target1').attr('current','current');
            thisPreview1 = $fi.prev(".image-preview");
        }

ioframeロードで使用されるjquery：

$('#upload_target1').load(uploadDone1);
$('#upload_target2').load(uploadDone2);
$('#upload_target3').load(uploadDone3);
$('#upload_target4').load(uploadDone4);

function uploadDone1() {
    var returnedValues = $('#upload_target1').contents().find('body').text().split(' ');
    var insertID = returnedValues[0];
    var imgName = returnedValues[1];
    var image =$('<img>').attr('src','images/listing-images/'+imgName);
    $('.insertID-hidden').attr('value',insertID);
    image.appendTo(thisPreview1);
    thisPreview1.css('border','1px solid #ffffff');
    thisPreview1.closest(".file-container").children(".loading").fadeOut(100);
    setTimeout(showUploadedDelete, 200);
    function showUploadedDelete(){
        var uploaded = $('<div>').addClass('file-uploaded');
        uploaded.appendTo(thisPreview1.next());
        thisPreview1.closest(".file-container").children(".file-clear").fadeIn(100);
        thisPreview1.next().children().fadeIn(100);
    }
}

function uploadDone2() {
    (the same as uploadDone1, but uses variable thisPreview2 and upload_target2, and so on upto 4)
}

これが示すことは、iframeに属性「current」が設定されているかどうかを照会し、設定されている場合は、次のiframeを使用してフォームを送信し、iframeが読み込まれたときに使用されるグローバル変数を設定することです（thisPreview ）、ただし各iframe/フォーム送信に固有。

ご覧のとおり、重複したコードがたくさんあり、何度も繰り返すことに制限されていますが、「無制限」の解決策を望んでいましたか？

助けていただければ幸いです。

4

1 に答える 1

0

使用できる簡単なトリックは次のとおりです。

$('#upload_target1').load(uploadDone(1));
$('#upload_target2').load(uploadDone(2));
$('#upload_target3').load(uploadDone(3));
$('#upload_target4').load(uploadDone(4));

次に、関数を1つだけ定義し、送信したパラメーターを連結します（たとえば、uploadDone関数の最初の行で連結しました）。よく見て、より多くの連結が必要な場所を確認してください。

function uploadDone(counter) {
    var returnedValues = $('#upload_target'+counter).contents().find('body').text().split(' ');
    var insertID = returnedValues[0];
    var imgName = returnedValues[1];
    var image =$('<img>').attr('src','images/listing-images/'+imgName);
    $('.insertID-hidden').attr('value',insertID);
    image.appendTo(thisPreview1);
    thisPreview1.css('border','1px solid #ffffff');
    thisPreview1.closest(".file-container").children(".loading").fadeOut(100);
    setTimeout(showUploadedDelete, 200);
    function showUploadedDelete(){
        var uploaded = $('<div>').addClass('file-uploaded');
        uploaded.appendTo(thisPreview1.next());
        thisPreview1.closest(".file-container").children(".file-clear").fadeIn(100);
        thisPreview1.next().children().fadeIn(100);
    }
}
于 2013-02-19T20:28:34.217 に答える