<Giriş dosyası> 'ndan bir <img>' ye görüntü yükleme

Kullanıcı tarafından bir öğe aracılığıyla seçilen bir resmi yüklemeye çalışıyorum.

Giriş öğesine şu şekilde bir onchange olay işleyicisi ekledim:

<input type="file" name="picField" id="picField" size="24" onchange="preview_2(this);" alt=""/>

ve önizleme_2 işlevi:

var outImage ="imagenFondo";
function preview_2(what){
    globalPic = new Image();
    globalPic.onload = function() {
        document.getElementById(outImage).src = globalPic.src;
    }
    globalPic.src=what.value;
}

OutImage, yeni resmin yüklenmesini istediğim etiketin id değerine sahiptir.

Ancak, yükleme işleminin hiçbir zaman gerçekleşmediği ve html'ye hiçbir şey yüklemediği görülmektedir.

Ne yapmalıyım?

Dosya API'sini destekleyen tarayıcılarda , dosyaları kullanıcı tarafından seçildikten sonra okumak için FileReader yapıcısını kullanabilirsiniz .

Misal

document.getElementById('picField').onchange = function (evt) {
    var tgt = evt.target || window.event.srcElement,
        files = tgt.files;

    // FileReader support
    if (FileReader && files && files.length) {
        var fr = new FileReader();
        fr.onload = function () {
            document.getElementById(outImage).src = fr.result;
        }
        fr.readAsDataURL(files[0]);
    }

    // Not supported
    else {
        // fallback -- perhaps submit the input to an iframe and temporarily store
        // them on the server until the user's session ends.
    }
}

Tarayıcı desteği

• IE 10
• Safari 6.0.2
• Chrome 7
• Firefox 3.6
• Opera 12.02

Dosya API'sinin desteklenmediği durumlarda, (güvenlik bilincine sahip tarayıcıların çoğunda) bir dosyanın tam yolunu bir dosya giriş kutusundan alamazsınız veya verilere erişemezsiniz. Uygulanabilir tek çözüm, formu gizli bir iframe'e göndermek ve dosyanın sunucuya önceden yüklenmesini sağlamak olacaktır. Ardından, bu istek tamamlandığında görüntünün src değerini yüklenen dosyanın konumuna ayarlayabilirsiniz.

İEamin'in cevabında söylediği gibi, HTML 5 artık bunu destekliyor. Verdiği bağlantı, http://www.html5rocks.com/en/tutorials/file/dndfiles/ , mükemmel. İşte o bölgedeki örneklere dayalı asgari bir örnek, ancak daha kapsamlı örnekler için o siteye bakın.

onchangeHTML'nize bir olay dinleyici ekleyin:

<input type="file" onchange="onFileSelected(event)">

Kimliği olan bir resim etiketi oluşturun ( height=200resmin ekranda çok büyük olmadığından emin olmak için belirtiyorum):

<img id="myimage" height="200">

İşte onchangeolay dinleyicisinin JavaScript'i . Bu sürer Fileolarak iletilen nesneyi event.target.files[0], bir yapıları FileReaderiçeriğini okumak için ve yeni bir olay dinleyicisi kadar setleri çıkan atamak data:için URL'yi imgetiketi:

function onFileSelected(event) {
  var selectedFile = event.target.files[0];
  var reader = new FileReader();

  var imgtag = document.getElementById("myimage");
  imgtag.title = selectedFile.name;

  reader.onload = function(event) {
    imgtag.src = event.target.result;
  };

  reader.readAsDataURL(selectedFile);
}

$('document').ready(function () {
    $("#imgload").change(function () {
        if (this.files && this.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#imgshow').attr('src', e.target.result);
            }
            reader.readAsDataURL(this.files[0]);
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="imgload" >
<img src="#" id="imgshow" align="left">

Bu benim için jQuery'de çalışıyor.

ES2017 Yolu

// convert file to a base64 url
const readURL = file => {
    return new Promise((res, rej) => {
        const reader = new FileReader();
        reader.onload = e => res(e.target.result);
        reader.onerror = e => rej(e);
        reader.readAsDataURL(file);
    });
};

// for demo
const fileInput = document.createElement('input');
fileInput.type = 'file';
const img = document.createElement('img');
img.attributeStyleMap.set('max-width', '320px');
document.body.appendChild(fileInput);
document.body.appendChild(img);

const preview = async event => {
    const file = event.target.files[0];
    const url = await readURL(file);
    img.src = url;
};

fileInput.addEventListener('change', preview);

Andy E, bunu yapmanın HTML tabanlı bir yolu olmadığı konusunda haklı *; ancak Flash kullanmak istiyorsanız, bunu yapabilirsiniz. Aşağıdakiler, Flash'ın yüklü olduğu sistemlerde güvenilir şekilde çalışır. Uygulamanızın iPhone'da çalışması gerekiyorsa, o zaman elbette yedek HTML tabanlı bir çözüme ihtiyacınız olacak.

* ( Güncelleme 4/22/2013: HTML artık bunu HTML5'te desteklemektedir. Diğer yanıtlara bakın.)

Flash yüklemenin başka avantajları da vardır - Flash, büyük bir dosyanın yüklenmesi ilerledikçe size bir ilerleme çubuğu gösterme yeteneği sağlar. (Bu konuda yanılıyor da olsam da arka planda Flash kullanarak Gmail'in bunu yaptığından oldukça eminim.)

Aşağıda, kullanıcının bir dosya seçmesine ve ardından görüntülemesine olanak tanıyan örnek bir Flex 4 uygulaması verilmiştir:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
               creationComplete="init()">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:Button x="10" y="10" label="Choose file..." click="showFilePicker()" />
    <mx:Image id="myImage" x="9" y="44"/>
    <fx:Script>
        <![CDATA[
            private var fr:FileReference = new FileReference();

            // Called when the app starts.
            private function init():void
            {
                // Set up event handlers.
                fr.addEventListener(Event.SELECT, onSelect);
                fr.addEventListener(Event.COMPLETE, onComplete);
            }

            // Called when the user clicks "Choose file..."
            private function showFilePicker():void
            {
                fr.browse();
            }

            // Called when fr.browse() dispatches Event.SELECT to indicate
            // that the user has picked a file.
            private function onSelect(e:Event):void
            {
                fr.load(); // start reading the file
            }

            // Called when fr.load() dispatches Event.COMPLETE to indicate
            // that the file has finished loading.
            private function onComplete(e:Event):void
            {
                myImage.data = fr.data; // load the file's data into the Image
            }
        ]]>
    </fx:Script>
</s:Application>