Fatal编程技术网
  • javascript/
  • JavaScript：为什么在mozilla中没有调用FileReader.onload？

JavaScript：为什么在mozilla中没有调用FileReader.onload？

javascript jquery html

JavaScript：为什么在mozilla中没有调用FileReader.onload？,javascript,jquery,html,mozilla,Javascript,Jquery,Html,Mozilla,我正在尝试使用JavaScript上传图像。它在Internet explorer和chrome中运行良好，但在Mozilla中不起作用！我还把它放在： 为什么Mozilla中没有调用reader.onload <html> <head> </head> <body> <input type="file" accept="image/*" capture="camera" id="fileLoader" name="fileLoade

我正在尝试使用JavaScript上传图像。它在Internet explorer和chrome中运行良好，但在Mozilla中不起作用！我还把它放在：

为什么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>
上传img.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]);
}

fileLoader=document.getElementById（'fileLoader'）；
var bufferCanvas=document.getElementById（'bufferCanvas'）；
var clickedImg=''；
var allImg=document.getElementsByClassName（“imgs”）；
对于（变量i=0；i警报（“reader.onload called”）；//在
handleFile
函数的最后一行，您需要更改：


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


到

您对此处定义的事件使用了错误的变量
函数handleFile（e）{


谢谢你，我应用了你推荐的更改，它现在在Mozilla中有效，但在Safari中无效！我是说如果更新我的代码（单击图像上传图像，而不是单击输入按钮）@Cgraphics确保真实的输入字段不被隐藏！例如，您不能使输入
显示：无；
，否则某些浏览器会将其视为安全风险。您可以改为
位置：绝对；顶部：-999px；左侧：-999px；
。这应该允许通过其他单击事件触发文件输入字段。@Cgraphics H您是如何从另一次单击触发文件输入的？它位于代码内部（在问题描述处）allImg[i]。onclick=function（e）{clickedImg=e.target | | e.srcelem；fileLoader.click（e）}虽然你没有在问题中使用任何jQuery，但是你用jQuery标记了这个问题，所以我将用它来回答，因为它更容易回答。否则你必须使用来触发事件。你能用
fileLoader.click（e）；
替换
$（fileLoader.trigger（'click'，e）；


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