1

I have found a script that lets me upload an image with a <input type="file">, and when an user loads a picture, it gets previewed in a <div>, this perfectly works on Chrome en FF, but IE simply does nothing... I don't know where the problem lies, and maybe someone here can help me :)

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]);
    }
}
4

1 回答 1

2

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

http://caniuse.com/filereader

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

于 2013-05-28T09:44:06.540 回答