Question

我有一个文件上传，它做了一些事情但主要是

使用iframe来模拟ajax（ajax无法处理文件数据，至少不会跨浏览器）
根据需要创建（克隆）新的上传输入，如果不需要则将其带走
允许同时上传多个文件（使用多个iframe）

我遇到的问题是，目前我正在使用4个iframe，但我必须创建4个iframe，并为每个iframe创建一些冗长的代码，即使代码执行相同的操作，只需使用不同的变量姓名/身份证等。

我希望有人可以帮助简化我的代码，如果可能的话，如果需要可以创建额外的iframe（即如果同时上传超过4个文件）。

代码相当冗长，我已经把它剥离回来（希望）你们需要什么，所以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>

jQuery处理我通过iframe发送的表单，设置其目标iframe并设置返回数据时使用的变量：

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 /表单提交都是唯一的。

正如你所看到的那样，有很多重复的代码，并且它重复了很多次，而我却希望有一个“无限制”的解决方案？

任何帮助表示赞赏！

Answer 1

您可以使用的一个简单技巧如下：

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

然后只定义一个函数并连接你刚发送的参数（例如在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);
    }
}

如何编写此代码以删除重复？

1 个答案: