It works fine in IE (at least versio...">
Geek asks and answers

Image Download Detection

I used this code:

<input type="image" ... onLoad="this.style.opacity = 1" />

It works fine in IE (at least versions that support opacity: p), but in Chrome the event onLoaddid not fire when the image loaded.

Please note that the srcinput attribute may change, and when it does some JavaScript, it is first set opacityto 0, and the appropriate properties transitionmake it look like the image disappears and the new one disappears. In addition, use <input type="image">is required because the server needs coordinates.

I have jerry rigging using absolutely positioned <img>with onLoadand opacityplaced behind <input>, which now uses a transparent GIF pixel. Although it works, it is ugly.

Is there a way to detect a successful upload of the image used <input>in Chrome, or is it similar to background-imageundetectable?

EDIT: in case this helps, here's the fiddle

+5
source share
4 answers

This is a kind of hack, but you can create an instance of the Javascript object Image, and then install an event listener on it, and then set the input src when it loads:

http://jsfiddle.net/t8n4y/

Disclaimer: Only tested on Chrome

HTML:

<input type="image" id="imgInput" />

JavaScript:

 var photo = document.getElementById('imgInput');
            var img = new Image();
            img.addEventListener('load', function () { alert("done loading"); }, false);
            img.src = 'http://jeremydouglass.com/gamertextually/images/gt_snowflake_tags-2-ach-large.png?ran=' + Math.random();
            photo.src = img.src;
+1
source

I remember in the past I encountered such a problem. You can detect this by following these steps:

window.onload = function(){
    var input = document.getElementById('input1');
    input.src='';
    input.addEventListener('load', loadImage, false);
    input.src = 'http://theoffguard.net/wp-content/upLoads/2012/04/Nick-Cage.jpg';
}

function loadImage()
{
  console.log("Image is loaded");
}

DEMO: http://jsbin.com/ufovom/9/edit

Hope this helps!

0
<input id="image" type="image" ... onLoad="this.style.opacity = 1" />

  //script ->

  $("#image").change(function () {
                if (this.files && this.files[0]) {
                var FR = new FileReader();
                FR.onload = function (e) {
                    //your onload
                };
                FR.readAsDataURL(input.files[0]);
            }
});
0

addEventListener() .

Note that before you add an event listener to the input, you will need to load the page to do this, just apply another event listener to the window object, and then run your function that references your input.

-2
source

More articles:


All Articles