CODEWITHSUNDEEP
jqueryhtmlcssfile-upload
Dotnet ReSource
Dotnet ReSource

Reputation: 201

Upload image not display the in IE Browser Using JavaScript

I am uploading image files using jQuery but whenever I upload any selected image. For this, I need to Priview display the Image in IE browser. But Firefox and Chrome Supported Following is set of functions .

My Code

<Script>
function previewImages(input) { 
    $('#ImagePreview').html('');
       var fileList = input.files;      
        var anyWindow = window.URL || window.webkitURL;
        for (var i = 0; i < fileList.length; i++) {
            var objectUrl = anyWindow.createObjectURL(fileList[i]);           
            $('#ImagePreview').append('<a href="#" class="remove"></a><img src="' + objectUrl + '" class="img-polaroid" style="height:70px;width:70px;">');
            window.URL.revokeObjectURL(fileList[i]);
        }
}

  <h1>Upload Image</h1>
  <div class="form_scpop" >
    <form action="" method="get">
       <input type ="file" onchange="previewImages(this);" multiple/>
      <input name="" type="" id="image_alt" class="input_txt" />
      <div id="ImagePreview" ></div>
       <button class="btn btn-info" type="button" onclick="closeimgwindow()">Save</button>
    </form>
  </div>

Upvotes: 0

Views: 1162

Answers (2)

psychobunny
psychobunny

Reputation: 1247

What you should do is upload the image to your server into a temporary folder via Ajax, and then send the url (generated randomly to avoid collisions) back to the window to display. When the user clicks save, copy it over (or reupload) to where you intended it to be.

This would be your ideal cross-browser solution or fallback because older IE's do not have proper support for what you are doing.

Upvotes: 2

user568109
user568109

Reputation: 48003

The files property is not supported for <input type ="file" multiple> on IE8 and IE9. Only HTML5 compliant browsers support it. Update to IE 10 and try your code.

var fileList = input.files;    
//fileList is undefined in IE 8 and IE 9

Update

IE8/IE9 do not implement the multiple option on the input element of type (no way to do that, see here). Try removing multiple option if possible and testing your code. Otherwise you will have to implement file upload via AJAX for older IE. Updating to IE10 browser is easier.

Upvotes: 5

Related Questions