Hochladen Bild in einem img-tag

Frohe Weihnachten an alle.

Habe ich 4 jeder Abschnitt enthält ein leeres img-tag. Beim hochladen eines Bildes muss es passen in den entsprechenden Abschnitt.

Wenn ich auf "Bild Hinzufügen im Abschnitt 1" und Bild hochladen, es hat den fix in Image_1 div wie klug, alle vier. Aber wenn ich klicken Sie auf einfügen-Funktion in meinem code nicht arbeitet.

Was ist mein Fehler hier.

<div class="pre_img" >
  <span>
     <img class="prw_img"  src="http://www.iconshock.com/img_jpg/REALVISTA/general/jpg/128/preview_icon.jpg" alt="your image" />
  </span> 
</div>

<input id="file" type="file" name="files[]" onChange="readURL(this);" />

<div id="Image_1">
    <button> AddImage to section 1</button>
    <img id="img_1" alt="" width="100px" height="100px" style="Border 1px solid #ccc"/>
</div>

<div id="Image_2">
    <button> AddImage to section 2</button>
    <img id="img_2" alt="" width="100px" height="100px" style="Border 1px solid #ccc"/>
</div>

<div id="Image_3">
    <button> AddImage to section 3</button>
    <img id="img_3" alt="" width="100px" height="100px" style="Border 1px solid #ccc"/>
</div>

<div id="Image_4">
    <button> AddImage to section 4</button>
    <img id="img_4" alt="" width="100px" height="100px" style="Border 1px solid #ccc"/>
</div>

Hier ist mein Skript

function readURL(input) {
     if (input.files && input.files[0]) {
           var reader = new FileReader();

           reader.onload = function (e) {
                $('.prw_img,#img_1').attr('src', e.target.result).width(112).height(112);
                $('#img_1').css('display','inline');
           };
           reader.readAsDataURL(input.files[0]);
     }
}

Ich habe eine JSBIN für die einfache Verständnis
Ich havn ' T Hinzugefügt, klicken Sie auf und versucht, hinzuzufügen, dass die Funktion dann das ganze script nicht funktioniert

Ich habe gerade überprüft und es funktioniert für Abs.1 nur
Ya ich erwähnte nur #img_1 in meinem Skript.... Ich klicken Sie auf die Schaltfläche und laden Sie das Bild für diesen Abschnitt
Haben Sie lassen Sie das form-element aus dem Beispiel-code oben? Ansonsten, Ihnen fehlt ein wesentliches Teil des markup...
Ya, die ich einfach entfernen Sie mein Formular, um den code vereinfachen

InformationsquelleAutor Vivek Dragon | 2012-12-25

Geben Sie dem Bild den Abschnitten a-Klasse, oder schließen Sie Sie in einem container zu machen, die von Ereignis-Listenern
einfacher zu handhaben

HTML:

  <div class="pre_img">
    <span><img class="prw_img" src=
    "http://www.iconshock.com/img_jpg/REALVISTA/general/jpg/128/preview_icon.jpg" alt=
    "your image"></span>
  </div>

  <form>
    <input id="file" type="file" name="files[]" onchange="readURL(this);">
  </form>

  <div id="Image_1" class="imageSection"><button>AddImage to section 1</button> <img id=
  "img_1" alt="" width="100px" height="100px" style="Border 1px solid #ccc" name=
  "img_1"></div>

  <div id="Image_2" class="imageSection"><button>AddImage to section 2</button> <img id=
  "img_2" alt="" width="100px" height="100px" style="Border 1px solid #ccc" name=
  "img_2"></div>

  <div id="Image_3" class="imageSection"><button>AddImage to section 3</button> <img id=
  "img_3" alt="" width="100px" height="100px" style="Border 1px solid #ccc" name=
  "img_3"></div>

  <div id="Image_4" class="imageSection"><button>AddImage to section 4</button> <img id=
  "img_4" alt="" width="100px" height="100px" style="Border 1px solid #ccc" name=
  "img_4"></div>

Dann verwenden Sie das folgende Skript, um die Anzeige des hochgeladenen Bildes zu einer Klasse [in diesem Fall die activeImage Klasse], und binden die Zuhörer auf die Tasten an, die schaltet die "active" - container

Js:

$(".imageSection button").click(function() {
    $(".imageSection img").removeClass("activeImage");
    $(this).parent().find("img").addClass("activeImage");
});
$(".imageSection:eq(0) img").addClass("activeImage");

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function(e) {
            $('.prw_img,.activeImage').attr('src', e.target.result).width(112).height(112);

            $('.activeImage').css('display', 'inline');
        };

        reader.readAsDataURL(input.files[0]);
    }
}

JsBin: http://jsbin.com/imonub/8/edit

InformationsquelleAutor extramaster

Versuchen Sie es mit diesem: http://jsbin.com/imonub/7/edit

var id = '1'; //set default id for first img tag


function readURL(input) {
 if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
        $('.prw_img').attr('src', e.target.result).width(112).height(112);

        $('#img_' + id).attr('src', e.target.result).width(112).height(112);
        $('#img_' + id).css('display', 'inline');
    };

    reader.readAsDataURL(input.files[0]);
 }
}
$(document).ready(function() {
$('button').click(function() {
    id = $(this).html().replace('AddImage to section', '').trim();
});
});

InformationsquelleAutor Anujith

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.