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

Posted 2023-02-22

【中文标题】如何为文件上传添加删除按钮/功能？ [复制]

【英文标题】：How do I add a delete button/function for file upload? [duplicate]

【发布时间】：2015-11-17 12:40:02

【问题描述】：

================编辑================================= =====================您好！非常感谢所有回答并试图帮助我的人。我能够按照@Kaiido 的建议使用 iframe 来获得我需要的东西，因为我以前的代码在 ie8 中不起作用。也感谢这一点：JQuery file posting using iframe 再次。非常感谢！ ============================================== ============================ 我有一个上传表格。我可以在提交时上传文件。问题是一旦用户选择要上传的文件，我就会尝试添加/附加删除按钮。 我需要它看起来像这样：

目标： 1.当用户点击删除按钮时，文件列表应该回到空。 2. 更改文件的行为应该类似于单击“删除”按钮。 3. 它需要在 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);
)

非常感谢您的帮助！

【问题讨论】：

嗨@DJDavid98！我确实在那里使用了该解决方案，但是，它只清除了该字段。文件列表不为空。

@Mary，input.value='' 解决方案应该可以工作，只需避免将文件列表设为全局变量即可。 prepareUpload 函数没有用，你只需要在上传时检查输入的files。或者，您的删除函数应该只删除全局 file 变量

嗨@Kaiido！我尝试为值分配一个空值。我检查了 files[0] 的值，它仍然不是空的。谢谢！

来自<input>的那个？你在哪个浏览器上试过？

是的。我需要让它在ie8中工作。谢谢！

【参考方案1】：

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

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

当您选择一个文件并想要删除它时，您只需将'' 分配给您的上传控制值。

【讨论】：

"对于 jquery 解决方案，请参阅 ..." 那么为什么要使用您的解决方案呢？我的意思是，它也不是香草

仍然不是香草那么为什么要在第一个 sn-p 中混合？

混合有什么问题。我也给了jquery。你想让我只给你 jquery 还是只给你 javascript 解决方案？

好吧，我没有看到 OP 中只提到 vanilla 请求，但为什么要将 jQuery 与 document.getElement 混合使用？除了使它成为与您刚刚复制的现在已删除的解决方案不同的解决方案之外？

嗨@Alex！谢谢！我也会试试这个。

【参考方案2】：

我做了一个小提琴，现在可以工作了，检查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);
)

【讨论】：

嗨，HeiN！谢谢！我会试试看。删除按钮应该仅在存在选定文件时出现。就像提交按钮一样。

@Mary 检查我的答案。选择文件时出现删除按钮

如果可行，请将其标记为答案。 @玛丽

@Hein 检查 cmets 和问题的编辑