Téléchargement d'Image avec Aperçu et Supprimer

Ont la followig des questions et ont besoin de réponses sur le script suivant qui vous donnera un Aperçu d'une Photo avant de le télécharger. Le script est à partir de http://jsbin.com/uboqu3/edit#javascript html

1) Le script fonctionne pour Firefox, pas bon pour IE. Comment faire cela fonctionne pour IE?

2) Il n'est pas une méthode pour supprimer la photo. Besoin de quelque chose comme une petite image "X" installé sur l'Aperçu de la Photo, en cliquant sur ce "X" pour supprimer la photo. Quelqu'un peut-il fournir cette solution?

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#img_prev')
            .attr('src', e.target.result)
            .height(200);
        };

        reader.readAsDataURL(input.files[0]);
    }
}
</script>

<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
</head>
<body>
<input type='file' onchange="readURL(this);" />
<img id="img_prev" src="#" alt="your image" />
</body>
</html>

Quelle erreur avez-vous sur IE ?
Ouais, pouvez-vous fournir plus d'information ou post un exemple dans jsfiddle.net

OriginalL'auteur user1315468 | 2012-04-18

6

Démo

Testé sur plusieurs navigateurs, Chrome, Fx, Safari 6 (quelqu'un pourrait-test 5?)

Fonctionne sur mon IE8 sous XP sans aucun changement dans les paramètres, mais comme @Gunasekaran mentionne plus tard sur cette page, vous pouvez avoir besoin de

Ouvrez Outils>options internet-> onglet sécurité-> personnaliser le niveau - recherchez le paramètre "local chemin d'accès au répertoire lorsque le téléchargement de fichiers sur un serveur" et cliquez sur Activer.
```
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Image preview</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
var blank="http://upload.wikimedia.org/wikipedia/commons/c/c0/Blank.gif";
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#img_prev')
.attr('src', e.target.result)
.height(200);
};
reader.readAsDataURL(input.files[0]);
}
else {
var img = input.value;
$('#img_prev').attr('src',img).height(200);
}
$("#x").show().css("margin-right","10px");
}
$(document).ready(function() {
$("#x").click(function() {
$("#img_prev").attr("src",blank);
$("#x").hide();  
});
});
</script>

<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
#x { display:none; position:relative; z-index:200; float:right}
#previewPane { display: inline-block; }
</style>
</head>
<body>
<section>
<input type='file' onchange="readURL(this);" /><br/>
<span id="previewPane">
<img id="img_prev" src="#" alt="your image" />
<span id="x">[X]</span>
</span>
</section>
</body>
</html>
```
Ressemble à ceci dans IE8 sous XP:

Une nouvelle méthode est createObjectURL que je n'ai pas mis en œuvre

Mise à jour Vous aurez besoin d'ajouter un onclick effacer le fichier d'entrée si vous souhaitez autoriser l'utilisateur à sélectionner la même image deux fois (onchange ne déclenche pas alors)

HTML fichier d'entrée sélection de l'événement ne se déclenche pas lors de la sélection du même fichier

Désolé, votre solution ne fonctionne pas. Testé sur IE8, et il ne fonctionne pas.
Téléchargé une nouvelle démo et mise à jour du code. Des œuvres, y compris le bouton masquer - pour moi, IE8 XP, FX 10
Désolé, essayé votre code sur mon IE8, mais toujours pas de travail, voir la capture d'Écran de mon IE8 pour votre code: asuma.com/user1231/ss-120418.jpg L'image d'aperçu est apparu comme une image brisée.
Quelle est la version sur quelle plateforme?
" stackoverflow.com/questions/12030686/... - j'ai mis à jour la réponse. Merci

OriginalL'auteur mplungjan
2

Cela ne fonctionnera pas sur rien de moins que Internet Explorer 10 ... FileReader() de soutien n'est pas introduit jusqu'à ce que IE10 .. il fonctionne avec Chrome 7 et Firefox 3.6

Consultez la documentation de soutien de FileReader ou caniuse.com ici

Désolé, votre réponse ne fonctionne pas. Testé sur IE 8 et il ne fonctionne pas.
im un peu confus ... Dans ma réponse je vous l'ai dit, il ne fonctionnera pas avec IE8 ... voir les liens que j'ai ajouté
Désolé, j'ai fourni un commentaire incorrect. Toutes les solutions pour les anciens Navigateurs?
juste un rapide google renvoie this -> code.google.com/p/image-upload-preview (jamais utilisé avant, mais affirme qu'il prend en charge IE8
Cependant, la DÉMO lien est mort

OriginalL'auteur ManseUK
1

En réponse à la dernière réponse de @user1315468
IE8 a besoin d'une sécurité de la modification de paramètres:

Ouvrez Outils>options internet-> onglet sécurité-> personnaliser le niveau
recherchez le paramètre "local chemin d'accès au répertoire lorsque le téléchargement de fichiers sur un serveur" et cliquez sur Activer.

Après ce changement, vous pouvez rouvrir le navigateur avec mplungjan démonstration du lien.
Espérons que cette aide.

OriginalL'auteur Gunasekaran R

**J'ai Collé l'complet code de travail pour tous les navigateurs..

REMARQUE: parfois, Internet Explorer peut bloquer les scripts,donc, afin de voir l'image cliquez sur l'invite et "Autoriser le contenu bloqué".Ci-dessous est le code de travail...**

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
</head>
<body>
<form name="form2">
<div>
<input type="file"  name="myFile"   id="myFile" onchange="readURL(this);"></input>
</div>
<div>
<img id="previewImg" src="#" />
</div>
</form>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#previewImg')
.attr('src', e.target.result)
.width(130);
}
reader.readAsDataURL(input.files[0]);
}else{
var filename = "";
filename = "file:\/\/"+input.value;
document.form2.previewImg.src=filename;
document.form2.previewImg.style.width="130px";
}
}
</script>   
</body>
</html>

previewImg n'est pas accessible par l'entremise du document.form2, sauf si elle est <input type="image"

OriginalL'auteur Abdul Razak

0

FileReader sonne bien pour lire le contenu de l'image ou de fichier.
Mais nous considérons que le fichier que vous étiez en train de lire a été 20MB gros, la lecture comme dataURL va créer un objet JS qui est tat gros. Comment éviter ça ?

OriginalL'auteur Ankit Garg

<img id="img1" alt="" runat="server"/> <span id="x" ></span> <asp:FileUpload runat="server" ID="FileUpload1" onchange="readURL(this)" />

<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$("#imgRepresentImage").attr("src", e.target.result).width(200);
};
reader.readAsDataURL(input.files[0]);
} else {
var img = input.value;
$("#imgRepresentImage").attr("src", img).width(200);
}
$("#x").text('[X]');
}
$(document).ready(function () {
$("#x").click(function () {
$("#imgRepresentImage").attr("src", "").width(0);
$("#x").text('');
$("#representImageUpload").val('');
});
});

A fonctionné pour moi 🙂

OriginalL'auteur Tran Anh Hien

Vous devez vous connecter pour publier un commentaire.