Question

我正在尝试使用JavaScript上传图片。它在Internet Explorer和Chrome中运行良好但在Mozilla中没有！我还将其放在：http://jsfiddle.net/LKUS8/6/

为什么在Mozilla中没有调用reader.onload？

<html>
<head>
</head>
<body>
    <input type="file" accept="image/*" capture="camera" id="fileLoader" name="fileLoader" style="display: none" />
    <canvas id="bufferCanvas" style="display:none"></canvas>
    <img id="img1" class="imgs" style="display:block">
    <textarea id="textarea1" name="Pic1" rows="4" cols="50" style="display:none"></textarea>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="uploadImg.js"></script>
</body>
</html>

uploadImg.js：

fileLoader = document.getElementById('fileLoader');
var bufferCanvas = document.getElementById('bufferCanvas');
var clickedImg = '';
var allImg = document.getElementsByClassName("imgs");
for (var i = 0; i < allImg.length; ++i) {
    allImg[i].style.cursor = "pointer";
    allImg[i].src = "https://cdn2.iconfinder.com/data/icons/picol-vector/32/image_add-128.png";
    allImg[i].onclick = function (e) {
        clickedImg = e.target || e.srcElement;//for ie 8 and before use e.srcElement
        fileLoader.click(e);
    }
}

fileLoader.addEventListener('change', handleFile, false);

textarea1 = document.getElementById('textarea1');
var ctx = bufferCanvas.getContext('2d');

function handleFile(e) {
    var reader = new FileReader();
    reader.onload = function (event) {
    alert("reader.onload called"); //<-----
        var img = new Image();
        img.onload = function () {
            clickedImg.src = img.src;
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(event.target.files[0]);
}

Answer 1

在handleFile函数的最后一行，您需要更改：

reader.readAsDataURL(event.target.files[0]);

到

reader.readAsDataURL(e.target.files[0]);

您在function handleFile(e) {

定义的事件中使用了错误的变量

Demo

JavaScript：为什么不在Mozilla中调用FileReader.onload？

1 个答案: