Javascript上传&预览图像不工作的IE

Javascript upload & previews image not working on IE

本文关键字:工作 IE 图像 上传 Javascript      更新时间:2023-09-26

我找到了一个脚本,可以让我上传一个<input type="file">的图像,当用户加载图片时,它会在<div>中预览,这在Chrome en FF上完美地工作,但IE根本不做任何事情…我不知道问题出在哪里,也许这里有人能帮助我:)

HTML/PHP:

<div id="Step_06_Content_Prev_Img_1" class="Step_06_Content_Prev_Img_1">        
   <div id="Pic_1" class="Pic_1">
      <span> Foto 1 : </span>
      <input type="hidden" name="MAX_FILE_SIZE" value="10000000" />
      <input name="file_1" type="file" onchange="changePic_1(this);" />
      <div id="Img_1_" class="Img_1_1">
         <img id="Img_1" class="Img_1" alt="Geen afbeelding geselecteerd!"/>
      </div>
   </div>
</div>
<div id="Pic_2" class="Pic_2">
   <span> Foto 2 : </span>
   <input type="hidden" name="MAX_FILE_SIZE" value="10000000" />    
   <input name="file_2" type="file" onchange="changePic_2(this);" />
   <div id="Img_1_" class="Img_1_1">
      <img id="Img_2" class="Img_2" alt="Geen afbeelding geselecteerd!" />
   </div>
</div>

JavaScript:

function changePic_1(input) 
{
    if(input.files && input.files[0]) 
    {
        var reader = new FileReader();
        reader.onload = function (e) 
        {
            $('#Img_1').attr('src', e.target.result).width("180px").height("180px");
            document.getElementById("Img_1").style.display = 'block';
            document.getElementById("Img_1_Text").style.display = 'none';
            document.getElementById("Img_1").style.visibility = "visible";
        };
        reader.readAsDataURL(input.files[0]);
    }
}
function changePic_2(input) 
{
    if (input.files && input.files[0]) 
    {
        var reader = new FileReader();
        reader.onload = function (e) 
        {
            $('#Img_2').attr('src', e.target.result).width("180px").height("180px");
            document.getElementById("Img_2").style.display = 'block';
            document.getElementById("Img_2_Text").style.display = 'none';
            document.getElementById("Img_2").style.visibility = "visible";
        };
        reader.readAsDataURL(input.files[0]);
    }
}

请参考以下链接了解FileReader

的兼容性http://caniuse.com/filereader

我认为fileReader()与您的IE版本不兼容,这就是为什么您没有得到任何错误,因为它不识别fileReader()函数