Как добавить кнопку/функцию удаления для загрузки файлов?

Question

Редактировать ============== ========================
Привет! Большое спасибо всем, кто ответил и пытался мне помочь. Я смог получить то, что мне нужно, используя iframe, как было предложено @Kaiido, так как мой предыдущий код не работает в ie8. Благодаря этому также: JQuery file posting using iframe Опять. Спасибо!

======================================================================================================================= =======================
У меня есть форма для загрузки. Я могу загрузить файл при отправке. Проблема в том, что я пытаюсь добавить/добавить кнопку удаления, когда пользователь выбирает файл для загрузки.

мне нужно, чтобы выглядеть следующим образом:

Цели:
1. Когда пользователь нажимает на кнопку Delete, список файлов должен вернуться к пустым.
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); 
}) 

Большое вам спасибо за вашу помощь!

Answer 1

Я сделал скрипку & сейчас работает, проверьте 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

Вам необходимо сбросить контроль загрузки, как этот

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

При выборе файла, и вы хотите, чтобы удалить его, вам просто нужно назначить '' к вашему значение управления загрузкой.