onchange fichier de changement d'entrée img src et le changement de couleur de l'image

événement onchange n'est pas de travail. Que suis-je censé faire pour obtenir le résultat sur la même page. Je ne veux pas faire de redirection vers une autre page pour télécharger l'image. Est-ce parce que de opencart? Je ne sais pas si c'est correct d'écrire comme cela dans cpanel. Je suis à l'aide de opencart et cpanel. Est-il un autre moyen?

HTML

 <input type='file' id="upload" onchange="readURL(this.value)" />
    <img id="img" src="#" alt="your image" />

script

function readURL(input) {
var url = input.value;
var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
if (input.files && input.files[0]&& (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg")) {
    var reader = new FileReader();

    reader.onload = function (e) {
        $('#img').attr('src', e.target.result);
    }
    reader.readAsDataURL(input.files[0]);
}
else{
     $('#img').attr('src', '/assets/no_preview.png');
  }
}

JSFiddle

a votre problème résolu
oui. jsfiddle.net/stN8U/1 cela a résolu mon problème Merci.
si la réponse fournie est utile d'accepter la réponse qui suites vous mieux.

InformationsquelleAutor Jill | 2014-07-19

27

Vous devez envoyer this objet seulement, au lieu de this.value tout en appelant onchange
```
<input type='file' id="upload" onchange="readURL(this)" />
```
parce que vous êtes à l'aide de input variable comme this dans votre fonction, comme à la ligne
```
var url = input.value;//reading value property of input element
```
Travail de DÉMONSTRATION

MODIFIER - Essayez d'utiliser jQuery comme ci-dessous --

supprimer onchange du champ de saisie :
```
<input type='file' id="upload" >
```
Lier onchange événements à champs de saisie :
```
$(function(){
  $('#upload').change(function(){
    var input = this;
    var url = $(this).val();
    var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
    if (input.files && input.files[0]&& (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg")) 
     {
        var reader = new FileReader();

        reader.onload = function (e) {
           $('#img').attr('src', e.target.result);
        }
       reader.readAsDataURL(input.files[0]);
    }
    else
    {
      $('#img').attr('src', '/assets/no_preview.png');
    }
  });

});
```
jQuery Demo
- jsfiddle.net/M3kj6/1 et jsfiddle.net/stN8U/1 les deux fonctionne bien pour moi. Je vous remercie. et également des suggestions sur la façon de changer la couleur de l'image qu'un flash ou photoshop est l'option pour cela ou est-il une autre option??
- oui cela fonctionne, en fin de compte vous êtes à la liaison des événements de changement d'entrée de fichier et l'appel de la fonction (qui ne reste de la tâche). La même chose je l'ai mentionné dans ma réponse, mais mettre tout le code à l'intérieur de fonction de liaison et de ne pas en séparé javascrpt fonction.
- pas de travail examplesin jsfiddle
InformationsquelleAutor Bhushan Kawadkar

dans votre code HTML : <input type="file" id="yourFile">
n'oubliez pas de référencer votre fichier js ou mettre le script suivant entre <script></script>
dans votre script :

var fileToRead = document.getElementById("yourFile");

fileToRead.addEventListener("change", function(event) {
    var files = fileToRead.files;
    if (files.length) {
        console.log("Filename: " + files[0].name);
        console.log("Type: " + files[0].type);
        console.log("Size: " + files[0].size + " bytes");
    }

}, false);

InformationsquelleAutor Yacine

Essayer avec ce code, vous obtiendrez l'aperçu de l'image pendant le chargement de

<input type='file' id="upload" onChange="readURL(this);"/>
<img id="img" src="#" alt="your image" />

 function readURL(input){
 var ext = input.files[0]['name'].substring(input.files[0]['name'].lastIndexOf('.') + 1).toLowerCase();
if (input.files && input.files[0] && (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg")) 
    var reader = new FileReader();
    reader.onload = function (e) {
        $('#img').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
}else{
     $('#img').attr('src', '/assets/no_preview.png');
}
}

Cette réponse est la même que la principale réponse, fondamentalement, a volé le fournisseur de la solution pour les points. Pas cool de l'omi.

InformationsquelleAutor Sankar Jay

Solution Simple. Pas De Jquery

HTML:

<img id="output" src="" width="100" height="100">

<input name="photo" type="file" accept="image/*" onchange="document.getElementById('output').src = window.URL.createObjectURL(this.files[0])">

InformationsquelleAutor Arif

Below solution tested and its working, hope it will support in your project.
HTML code:
    <input type="file" name="asgnmnt_file" id="asgnmnt_file" class="span8" 
    style="display:none;" onchange="fileSelected(this)">
    <br><br>
    <img id="asgnmnt_file_img" src="uploads/assignments/abc.jpg" width="150" height="150" 
    onclick="passFileUrl()" style="cursor:pointer;">

JavaScript code:
    function passFileUrl(){
    document.getElementById('asgnmnt_file').click();
    }

    function fileSelected(inputData){
    document.getElementById('asgnmnt_file_img').src = window.URL.createObjectURL(inputData.files[0])
    }

InformationsquelleAutor Amzad Khan

Vous devez vous connecter pour publier un commentaire.