Question

使用简单的输入控件：

<input type="file" id="demo" multiple />
<input type="submit value="Submit Final" />

有没有一种方法可以使用JavaScript / Jquery进行自定义，以允许在第二个和第三个“浏览”按钮单击上添加其他文件？（在点击“提交最终”按钮之前）。在服务器端，我正在使用Microsoft MVC。

谢谢。

我已经尝试了一些jquery插件，但是找不到合适的插件。

在单击“ Submit Final”按钮之前，不希望提交到服务器。

Answer 1

找到解决方案：

<input type="file" class="files" id="files" name="files" multiple onchange="javascript:updateList()">

<div id="selectedFiles" style="margin-left:10px"></div>


<script>
updateList = function () {
    var input = document.getElementById('files');
    var output = document.getElementById('selectedFiles');

    var f = $("#selectedFiles").data("files");

    if (f != null) {


        for (var i = 0; i < input.files.length; i++) {
            f.push(input.files.item(i));

        }

        $("#selectedFiles").data("files", f);

    }
    else {
        var dFiles = new Array();
        for (var i = 0; i < input.files.length; i++) {
            dFiles.push(input.files.item(i));
        }

            $("#selectedFiles").data("files", dFiles);

    }


    var f = $("#selectedFiles").data("files");
    output.innerHTML = '<ul>';
    for (var i = 0; i < f.length; ++i) {

        if (validateFileExt(f[i].name))
            output.innerHTML += '<li>' + f[i].name + ' (' + f[i].size + ')' + '<a onclick="removeFile(this)" href="javascript:void(0);">&nbsp;remove</a>' + '</li>';
    }
    output.innerHTML += '</ul>';
}


</script>

Answer 2

您可以在用户提交表单之前设置显示图像的任何前端显示。我添加了一些bootstrap4显示类，该类在该用例中很好用。 jQuery处理文件选择对话框，而不是提交按钮。

function readURL(input) {
  if (input.files && input.files[0]) {

    var reader = new FileReader();

    reader.onload = function(e) {
      $('.image-upload-wrap').hide();

      $('.file-upload-image').attr('src', e.target.result);
      $('.file-upload-content').show();

      $('.image-title').html(input.files[0].name);
    };

    reader.readAsDataURL(input.files[0]);

  } else {
    removeUpload();
  }
}

function removeUpload() {
  $('.file-upload-input').replaceWith($('.file-upload-input').clone());
  $('.file-upload-content').hide();
  $('.image-upload-wrap').show();
}
$('.image-upload-wrap').bind('dragover', function () {
        $('.image-upload-wrap').addClass('image-dropping');
    });
    $('.image-upload-wrap').bind('dragleave', function () {
        $('.image-upload-wrap').removeClass('image-dropping');
});

然后是一些html

$('[file-upload]').change(function () {
    var File = this.files;

    if (File && File[0]) {
        ReadImage(File[0]);
    }
});
});

var ReadImage = function (file) {
var s = document.getElementById('UpdatedActionsFileUpload');
s.value = 'ReverseDelete';
var reader = new FileReader;
var image = new Image;
image.addEventListener('error', imagenotfound);
var imagenotfound = function () {
    alert("imagenotfound");
};

reader.readAsDataURL(file);
reader.onload = function (_file) {
    image.src = _file.target.result;
    image.onload = function () {
        $('[target-img]').attr('src', _file.target.result);

        $('[img-preview]').show();
    }
};
};
var ClearPreview = function () {
$('[file-upload]').val('');
$('[img-description]').text('');
$('#img-preview').css({ "visibility": "visible" });
$('[img-preview]').hide();
var s = document.getElementById('UpdatedActionsFileUpload');
s.value = 'Delete';
};

有没有办法在提交到服务器之前将其他文件添加到文件上传中？

2 个答案: