Question

================编辑================================= ====================
您好！非常感谢所有回答并试图帮助我的人。因为我之前的代码在ie8中没有工作，所以我能够按照@Kaiido的建议使用iframe得到我需要的东西。多亏了这一点：JQuery file posting using iframe再次。非常感谢！

========================================== =============================
我有一个上传表格。我可以在提交时上传文件。问题是我试图在用户选择要上传的文件时添加/附加删除按钮。

我需要它看起来像这样：

目标：
1.当用户点击删除按钮时，文件列表应该返回空白 2.更改文件应该像点击“删除”按钮一样它需要在IE 8中工作。它很糟糕。

输入表格：

Attachment: <input type="file" name="upload" id="upload">
<a href="#" id="btnSubmit">Submit</a>

JS：

var files;

$('input[type=file]').on('change', prepareUpload);

function prepareUpload(event)
{   
    files = event.target.files;  // I'm not sure but the problem might be on this part. Maybe I could get the opposite of this or negate this?
}

function uploadFiles(event)
{
    event.stopPropagation(); 
    event.preventDefault();

    var data = new FormData();

    $.each(files, function(key, value)
    {
        data.append(key, value);
    });

    $.ajax({
        url: 'execs/upload.php?files',
        type: 'POST',
        data: data,
        cache: false,
        dataType: 'json',
        processData: false, 
        contentType: false, 
        success: function(data)
        {
            console.log('Uploaded');
        },
        error: function()
        {
            console.log('Failed');
        }
    })
}

$("#btnSubmit").click(function(e)
{
    uploadFiles(event);
})

非常感谢你的帮助！

Answer 1

我做了一个小提琴＆amp;现在正在工作，请检查this。希望这可以帮助。我已经修改了js如下（评论）。顺便说一下，我没有看到删除按钮。

var files;
$('#btnSubmit').hide(); // ADDED

$('input[type=file]').change(function(){ // MODIFIED
    if(this.value!=''){ 
        prepareUpload();
    }else $('#btnSubmit').hide();
});

function prepareUpload(event)
{   
    $('#btnSubmit').show(); 
    files = event.target.files;
}

function uploadFiles(event)
{
    event.stopPropagation(); 
    event.preventDefault();

    var data = new FormData();

    $.each(files, function(key, value)
    {
        data.append(key, value);
    });

    $.ajax({
        url: 'execs/upload.php?files',
        type: 'POST',
        data: data,
        cache: false,
        dataType: 'json',
        processData: false, 
        contentType: false, 
        success: function(data)
        {
            console.log('Uploaded');
        },
        error: function()
        {
            console.log('Failed');
        }
    })
}

$("#btnSubmit").click(function(e)
{
    uploadFiles(event);
})

Answer 2

您需要像这样重置上传控件

＆＃13;

$(document).ready(function() {
  de();

  $("#fileU").on("change", function() {



    if ($("#fileU").val() != "") {
      $("input[type=button]").attr("style", "display:block");
    } else {
      de();
    }
  });
  $("input[type=button]").click(function() {
    $("#fileU").val('');
    de();
  })

})

function de() {
  $("input[type=button]").attr("style", "display:none");
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="fileU" multiple/>
<input type="button" value="delete FIle" />

＆＃13;

当您选择文件并想要将其删除时，您只需将''指定给上传控件的值。

如何为文件上传添加删除按钮/功能？

2 个答案: