如何为文件上传添加删除按钮/功能? [英] How do I add a delete button/function for file upload?

问题描述

===============编辑================================== ===================
你好！非常感谢所有回答并尝试帮助我的人.我可以通过使用@Kaiido建议的iframe来获得所需的内容，因为以前的代码在ie8中不起作用.还要感谢您:使用iframe的JQuery文件发布再次.非常感谢！

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

我需要它看起来像这样:

================Edit=====================================================
Hello! Thanks so much for everyone who answered and tried to help me. I was able to get what I needed by using iframe as suggested by @Kaiido since my previous code doesn't work in ie8. Thanks to this as well: JQuery file posting using iframe Again. Thanks so much!

=======================================================================
I have an upload form. I am able to upload the file on submission. The problem is I am trying to add/append a delete button once the user chooses a file to upload.

I need it to look like this:

目标:
1.当用户单击删除"按钮时，文件列表应返回为空.
2.更改文件的行为应类似于单击删除"按钮.
3.它需要在IE 8中工作.很烂.

Goals:
1. When user clicks on Delete button, the filelist should go back to empty.
2. Changing the file should behave like clicking on the Delete button.
3. It needs to work in IE 8. It sucks.

输入表格:

Input Form:

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);
})

非常感谢您的帮助！

Thank you so much for your help!

推荐答案

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

You need to reset your upload control like this

$(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");
}

<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" />

选择文件并要删除它时，只需将''分配给您的上传控件值即可.

When you select a file, and you want to remove it, you just need to assign '' to your value of upload control.

这篇关于如何为文件上传添加删除按钮/功能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！