Javascript上传&预览图片无法在IE上运行

时间:2013-05-28 08:44:40

标签: javascript html

我找到了一个脚本,可以让我上传带有<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]);
    }
}

1 个答案:

答案 0 :(得分:2)

有关FileReader的兼容性,请参阅以下链接

http://caniuse.com/filereader

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