Question

I want to read the picture from user’s local file. (the user is under ie7 -ie9, so it doesn’t support fully version of html5) I find the first time I assume the input|file value, the picture doesn’t show, the second time I change another picture, the image can show. Just want to know how to make the first time I input picture it is can show.

I want read the picture from user’s local file, I apply below code:

function ShowImage(obj){ 
  var allowSuffix=".jpg|.gif|.bmp|.png"; //.jpg,.bmp,.gif,.png

  var suffix=obj.value.substring(obj.value.lastIndexOf(".")+1).toLowerCase();

  var browserVersion= window.navigator.userAgent.toUpperCase();

  if(allowSuffix.indexOf(suffix)>-1){
    if(browserVersion.indexOf("MSIE 7.0")>-1 || browserVersion.indexOf("MSIE 8.0")>-1 || browserVersion.indexOf("MSIE 9.0")>-1){//ie7, ie8, ie9 
      obj.select();
      var source=document.selection.createRange().text;
      obj.blur();

      var newPreview = document.getElementById("divNewPreview");
      newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = source; 
      newPreview.style.width = 160; 
      newPreview.style.height = 170; 
      newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = 'scale';

      $("#divPreview").attr("style","display:none");
      $("#divNewPreview").attr("style","filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);width:160px;height:170px;border:solid 1px #d2e2e2;");

    }
  }
}

the html part code is easy like:

<div id="divNewPreview" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image ); width: 160px; height: 170px; border: solid 1px #d2e2e2; display: none;"></div>
<p>
  input file: <input type="file" onchange="ShowImage(this)" />
</p>

Answer 1

Older browsers have no access to the local filesystem. You need to post it to the server before you can view the file.