Question

我正在使用此代码：

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。
获取空目标结果或取消对话框所需的代码是什么？

Answer 1

使用
FileReader.abort()到中止读取大文件的过程
FileReader.onabort 检测流程已中止（隐藏#image）

https://developer.mozilla.org/en/docs/Web/API/FileReader

在下面的示例中，abort()将由setTimeout合成触发，仅用于演示。您可以使用按钮单击来触发abort（也在此示例中）

＆＃13;

var reader,                          // make it accessible
    $upload = $("#fileToUpload"),    // upload input
    $image = $("#image"),            // image
    $abort = $("#abort");            // abort button

$upload.on("change", function() {

  reader = new FileReader();

  reader.onabort = function() {
    console.log("Reading aborted!");
    $image.hide();                   // Hide image
  };

  reader.onload = function (e) {
    console.log("Reading complete!");
    $image.attr("src", e.target.result).show(); // Set src and show image
  };

  // read the image file as a data URL.
  reader.readAsDataURL(this.files[0]);

  // (JUST FOR DEMO!!! EMULATE ABORT AFTER 1ms. Remove later the following)
  setTimeout(function(){ reader.abort(); }, 1);        

});

// INSTEAD OF USING THE ABOVE 1ms setTimeout
// LET THE USER MANUALLY ABORT FILE READING
$abort.on("click", function(){
  reader.abort();                      // This is how you abort a file reading!
});

＆＃13;

#image{display:none;} /* HIDDEN BY DEFAULT */

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="fileToUpload"> <br>
<button id="abort">ABORT READING LARGE IMAGE</button><br>
<img id="image" src="" alt="">

＆＃13;

Answer 2

这是您可以尝试的另一种选择：

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

Answer 3

您好，您可以重新发布此Link here

<强> JS

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

<强> HTML

<!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>

如何中止/取消文件读取 - FileReader

3 个答案: