0

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

  1. 使用 iframes 模拟 ajax（ajax 不能处理文件数据，至少不能跨浏览器）
  2. 如果需要，创建（克隆）新的上传输入，如果不需要，则删除
  3. 允许同时上传多个文件（使用多个 iframe）

我遇到的问题是，目前我正在使用 4 个 iframe，但我必须创建 4 个 iframe，并且每个 iframe 都有一些冗长的代码，即使代码做同样的事情，只是使用不同的变量名/id等等

我希望有人可以帮助简化我的代码，如果可能的话，可以在需要时创建额外的 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 是否设置了“当前”属性，如果有，则使用下一个 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));

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