Javascript для кнопки ввода файла, чтобы сообщить, что загрузка файла завершена

В настоящее время я настраиваю кнопки входных файлов на моем сайте. До сих пор я изменил непрозрачность исходного входного файла, чтобы он не отображался и дал ему z-индекс в 2, чтобы кнопка по-прежнему была нажата. Проблема заключается в том, что без собственного поведения входного файла у меня нет указаний на то, когда файл завершил загрузку. Как я могу добавить JS/JQuery, который отображает немного:Javascript для кнопки ввода файла, чтобы сообщить, что загрузка файла завершена

<i class="fa fa-check"></i>

рядом с моей кнопки, когда загрузка файла закончена.

Вот что мой HTML выглядит следующим образом:

<%= simple_form_for @user do |f| %> 
    <div class="upload-file-container"> 
     <%= f.file_field :licencepicture, id: "myFileInput" %> 
     <div id="fileName"></div> 
    </div> 
<% end %>

источник

2015-07-03 David Geismar

Можете ли вы предоставить ваши JS коды? –

Что значит? Я на самом деле ищу JS для этого, потому что мне не удалось написать ничего хорошего –

Можете ли вы опубликовать то, что вы написали, чтобы мы могли вам помочь? Мы не просто пишем код для людей – winhowes

Когда загрузка файла завершается через AJAX, вы будете иметь успех обратного вызова, добавить его там, как это (этот код своего рода грубый, но должен дать вам представление о том, что стремиться):

$("#myFileInput").on("change", function(e){ 
    var file = e.target.files[0]; 
    var formData = new FormData(); 
    formData.append("file", file); 

    var xhr = new XMLHttpRequest(); 
    xhr.open(myMethod, myURL, true); 
    xhr.onload = function(e) { 
    if(xhr.status === 200) { 
     $("#myFileInput").after('<i class="fa fa-check"></i>'); 
    } 
    else { 
     console.log("error"); 
    } 
    }; 
    xhr.send(formData); 
});

источник

2015-07-03 05:58:55 winhowes

Я не понимаю, зачем мне здесь AJAX. Я не пишу никаких строк AJAX, чтобы получить файл. Думаю, все позаботится о рельсах? (Я обновил сообщение) –

Ну, если вы не выполняете полную перезагрузку страницы или перезагрузку iframe, то где-то используется ajax. Тем не менее идея состоит в том, чтобы добавить '$ (" # myFileInput "). После ('');' в обработчике успеха после загрузки файла. – winhowes

Если вы пытаетесь получить результаты загрузки файла из входного файла, вы можете получить его с помощью класса FileReader. С этим вы можете увидеть, был ли ваш файл загружен в файл типа ввода.

Html:

<input id="fileInpt" type="file"/> 
<br/> 
<img id="imagePreview" alt="image preview" />

JQuery:

$("#fileInpt").on("change", function(){ 

    if (input.files && input.files[0]) { 

     var reader = new FileReader(); 
     reader.readAsDataURL(input.files[0]); 

     reader.onload = function (e) { 
      //With this e object you can get anything you want from input 
      //type file. The content of uploaded file, for example: 
      //e.target.result; 
      $("#imagePreview").attr("src", e.target.result); 

      alert("Load content is finished!"); 
     } 
    } 
});

Однако, если вы хотели бы видеть результаты загрузки вы должны работать с Ajax с помощью JQuery или простой JavaScript.

$.ajax({ 
    url: "script.php", 
    method: "POST", 
    data: { id : menuId }, 
    dataType: "html" 
}); 

request.done(function(msg) { 
    $("#log").html(msg); 
}); 

request.fail(function(jqXHR, textStatus) { 
    alert("Request failed: " + textStatus); 
});

источник

2015-07-03 06:22:45 alysonsm

Вот мое решение:

$(document).ready(function(){ 
    realInputField = $('#myFileInput') 
    realInputField.change(function() { 
     $('#fileName').append("<i class='fa fa-check'></i>") 
    }); 
});

источник

2015-07-03 07:23:08

Javascript для кнопки ввода файла, чтобы сообщить, что загрузка файла завершена

ответ

Смежные вопросы