18041 sujets

Questions générales et questions de débutants

Onchange sur IE avec input type="file"

Bonjour à tous

je souhaite réaliser un upload d'image pour une site web pour cela je récupère le nom et le chemin du fichier puis je l'affiche dans la textarea en utilisant un javascript et la propriété OnChange de mon input type="file". Cependant sur google chrome j'arrive a faire en sorte que le chemin de l'image apparaisse a l'endroit exact ou se trouve le curseur mais sur IE il me l'affiche forcément au tout début de la textarea. J'ai testé avec un input type="button" et un onclick et la ca marche également sur IE mais j'ai besoin du type file car il s'agit d'un upload et pareil pour le OnChange. Voici un exemple simplifié qui suffit largement a comprendre mon problème avec IE:
<html>
<head>
<script type="text/javascript">
function getInputSelection(el) {
    var start = 0, end = 0, normalizedValue, range,
        textInputRange, len, endRange;
 
    if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
        start = el.selectionStart;
        end = el.selectionEnd;
    } else {
        range = document.selection.createRange();
 
        if (range && range.parentElement() == el) {
            len = el.value.length;
            normalizedValue = el.value.replace(/\r\n/g, "\n");
 
            // Create a working TextRange that lives only in the input
            textInputRange = el.createTextRange();
            textInputRange.moveToBookmark(range.getBookmark());
 
            // Check if the start and end of the selection are at the very end
            // of the input, since moveStart/moveEnd doesn't return what we want
            // in those cases
            endRange = el.createTextRange();
            endRange.collapse(false);
 
            if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
                start = end = len;
            } else {
                start = -textInputRange.moveStart("character", -len);
                start += normalizedValue.slice(0, start).split("\n").length - 1;
 
                if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
                    end = len;
                } else {
                    end = -textInputRange.moveEnd("character", -len);
                    end += normalizedValue.slice(0, end).split("\n").length - 1;
                }
            }
        }
    }
 
    return {
        start: start,
        end: end
    };
}
 
function offsetToRangeCharacterMove(el, offset) {
    return offset - (el.value.slice(0, offset).split("\r\n").length - 1);
}
 
function setSelection(el, start, end) {
    if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
        el.selectionStart = start;
        el.selectionEnd = end;
    } else if (typeof el.createTextRange != "undefined") {
        var range = el.createTextRange();
        var startCharMove = offsetToRangeCharacterMove(el, start);
        range.collapse(true);
        if (start == end) {
            range.move("character", startCharMove);
        } else {
            range.moveEnd("character", offsetToRangeCharacterMove(el, end));
            range.moveStart("character", startCharMove);
        }
        range.select();
    }
}
function insertTextAtCaret(el, text) {
    var pos = getInputSelection(el).end;
    var newPos = pos + text.length;
    var val = el.value;
    el.value = val.slice(0, pos) + text + val.slice(pos);
    setSelection(el, newPos, newPos);
}
 
function add() {
    var textarea = document.getElementById("ta");
    textarea.focus();
    insertTextAtCaret(textarea, "[INSERTED]");
 
    }
 
</script>
</head>
<body>
<input type="file" id="insertButton" value="Insert" onchange="add();">
<br>
    <textarea rows="5" cols="50" id="ta">Put the caret in here and press the button</textarea>  
    </body>
    </html>[code=php]
[/code]
Sujet clos
Aller à