Question

我想用图标按钮创建表单。当用户点击图标浏览器对话框时，将打开并允许他选择文件。完成后，他可以再次点击图标并选择另一个文件（仅限X文件）。

我该怎么做？

这就是我现在所拥有的:( hide = display：none）

<form class="form-horizontal" action='#' method="post"  enctype="multipart/form-data">

    <img class="uploadFileImg" alt="" src="images/photoIconOn.png"> <br /><br/>
    <span class="fileNameBox"></span>
    <input type='file' name='file[]' class='file-field hide' maxlength='2' accept="image/jpg,image/png,image/jpeg,image/gif" />

</form>

JS：

$(".uploadFileImg").on('click',function(){
   $(".file-field").trigger('click'); 

    var new_field = $("<input type='file[]' class='form-control file-field hide'>");
    $(this).closest('form').append(new_field);     

});

检查文件验证：

$(function() {
    $('input.file-field').on('change', function(e) {
        var filename = $(this).val();
        if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test(filename)) {
            this.value = '';
            $(this).closest('form').find('.fileNameBox').html("<span class='valid_msg'>Only images allowed</span>");
        }
        else
            $(this).closest('form').find('.fileNameBox').html("Image: " + filename + " <button class='clear_file btn btn-default btn-xs'>remove</button>");
  });
});

删除文件：

$(function() {
    $(document).on('click','.clear_file',function() {
        $(this).closest('form').find('input.file-field').val("")
        $(this).closest('form').find('.fileNameBox').html("");
  });
});

Answer 1

使用此jquery file upload plugin - 处理文件上传跨浏览器兼容是一项艰巨的任务，而且有人已经付出了艰苦的努力。

插件可以配置为完全符合您的要求，请参阅演示。

使用图标按钮上传多个文件

1 个答案: