jquery 如何中止取消文件阅读FileReader

cuxqih21 于 2024-01-07 发布在 jQuery

关注(0)|答案(3)|浏览(172)

我使用这个代码：

document.getElementById("fileToUpload").onchange = function () {
  var reader = new FileReader();
    
  reader.onload = function (e) {
   // get loaded data and render thumbnail.
   $("#image").show();
   document.getElementById("image").src = e.target.result;
  };
    
  // read the image file as a data URL.
  reader.readAsDataURL(this.files[0]);
};

字符串
如果用户按下取消按钮，所选文件将为空，所以我需要隐藏img。
获得空目标结果或取消对话框所需的代码是什么？

jquery

来源：https://stackoverflow.com/questions/38004157/how-to-abort-cancel-a-file-reading-filereader

3条答案

按热度按时间

kx7yvsdv1#

使用
FileReader.abort()用于中止阅读大文件的过程
FileReader.onabort用于检测进程已中止（hide #image）
https://developer.mozilla.org/en/docs/Web/API/FileReader
在下面的示例中，abort()将由setTimeout合成触发，这只是为了演示。您可以使用按钮单击来触发abort（也在此示例中）

const elFile = document.querySelector("#file");
const elAbort = document.querySelector("#abort");
const elImage = document.querySelector("#image");
const reader = Object.assign(new FileReader(), {
  onabort() {
    console.log("Reading aborted!");
    elImage.classList.add("u-hidden"); // Hide image
  },
  onload(evt) {
    console.log("Reading complete!");
    elImage.src = evt.currentTarget.result;
    elImage.classList.remove("u-hidden"); // Show image
  },
  onerror: console.error
});
elFile.addEventListener("change", (evt) => {
  // Read the image file as a data URL.
  reader.readAsDataURL(evt.currentTarget.files[0]);
  // JUST FOR THIS DEMO! EMULATE ABORT AFTER 1ms. (Remove this later!)
  setTimeout(() => reader.abort(), 1);
});
// INSTEAD OF USING THE ABOVE 1ms setTimeout DEMO ABORT
// LET THE USER MANUALLY ABORT FILE READING
elAbort.addEventListener("click", () => {
  reader.abort(); // This is how you abort a file reading!
});

/* Utility classes */
.u-hidden { display: none; }
#image { max-height: 120px; }

<input id="file" type="file" accept="image/*"><br>
<button id="abort" type="button">ABORT READING</button><br>
<img id="image" class="u-hidden" src="#!" alt="">

展开查看全部

赞(0）回复(0）举报 2024-01-07

iqxoj9l92#

这里有另一个你可以尝试的选择：

(function () {
    $("#fileToUpload").on('change', function () {
    var reader = new FileReader();
    reader.onload = function (e) {
      // get loaded data and render thumbnail.
      $("#image").css('display', '');
      $("#image").attr('src', e.target.result);
    };
    // read the image file as a data URL.
    reader.readAsDataURL(this.files[0]);
  });
  $('#btnUpload').on('click', function () {
    if (confirm('Are you sure you want to upload this Image?')) {
        // your upload code here
    } else { // user clicked the cancel button
        $("#fileToUpload").replaceWith($("#fileToUpload").clone());
      $("#image").css('display', 'none').attr('src', '');
    }
  });
})();

字符串
参见示例jsfiddle：https://jsfiddle.net/fictus/dsgjtmfq/

展开查看全部

赞(0）回复(0）举报 2024-01-07

dl5txlt93#

你好，你可以参考这个Link here

// Add your javascript here
    $(function(){
       $('#blah').hide();
    function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                   $('#blah').show();
                    $('#blah').attr('src', e.target.result);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
        $("#imgInp").change(function(){
            $('#blah').hide();
            readURL(this);
        });
    });

字符串

超文本标记语言

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
     <form id="form1" runat="server">
        <input type='file' id="imgInp" />
        <img id="blah" src="#" alt="your image" />
    </form>
    <!-- Put your html here! -->
  </body>
</html>

型

展开查看全部

赞(0）回复(0）举报 2024-01-07

我来回答

jquery 如何中止取消文件阅读FileReader

3条答案

相关问题

热门标签

最新问答