Olası Çoğalt seçtikten sonra Ekran görüntüsü:
Preview an image before it is uploadedHTML - dosya adını
Ben göz atmak ve bir dosyayı seçmek için
<input type="file" name="filename" accept="image/gif, image/jpeg, image/png">
beni sağlayan bir form var.
Yapmak istediğim resim seçildikten hemen sonra bu görüntüyü göstermek. Ve bu, formdaki "gönder" düğmesine basılmadan önce, görüntü neredeyse tamamen İstemci tarafında kalıyor. Bu yapılabilir mi?
Sen git
HTML
<!DOCTYPE html>
<html>
<head>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></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="blah" src="#" alt="your image" />
</body>
</html>
Senaryo:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah')
.attr('src', e.target.result)
.width(150)
.height(200);
};
reader.readAsDataURL(input.files[0]);
}
}
Uzun süre almak için aplojiler. Cevabınızı geri çektim ve mükemmel çalışır, ama değil IE, orijinal olarak test ettiğim şey.Çok teşekkürler: –
Bu, IE'de çalışmıyor!IE FileReader sınıfınız yok! – Rodrigo
benim için demo çalışması ancak sitemde (yerel ana bilgisayar) değil -> görüntüyü yükledikten sonra (e) işlevinin aranmamasının nedeni ne olabilir? – user1932595
Aşağıdaki kod ile bunu başarabilirsiniz:
$("input").change(function(e) {
for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {
var file = e.originalEvent.srcElement.files[i];
var img = document.createElement("img");
var reader = new FileReader();
reader.onloadend = function() {
img.src = reader.result;
}
reader.readAsDataURL(file);
$("input").after(img);
}
});
Bu çalışma görünmüyor. JSFIDDLE test sitesini çalıştırdığımda dosya adına göz atabilir ve seçebilirim fakat hiçbir şey görüntülenmiyor. Bunu IE ve Opera'da denedim. Neyi yanlış yapıyorum? –
Hem JFiddle sayfasında hem de kendi sayfamda uygulamaya çalışırken, "e.originalEvent.srcElement tanımsız" hatasını alıyorum. E.originalEvent'i işaretlediğimde, yalnızca özellikleri vardır: kabarcıklar, cancelable, currentTarget, defaultPrevented, eventPhase, explicitOriginalTarget, Trusted, originalTarget, target, timeStamp, type ve __proto__. Yüklenen dosya adı ve bazı ayrıntılar e.orginalEvent.originalTarget.files altında bulunabilir, ancak resmin kaynağını nerede bulacağımı bulamıyorum. –
Bu HTML5 kullanılarak yapılabilir, fakat sadece bunu destekleyen tarayıcılarda çalışır. İşte bir example.
Bunu desteklemeyen tarayıcılar için alternatif bir yönteme ihtiyacınız olacağını unutmayın. this plugin ile çok fazla iş yaptım, bu da elinizden çok iş çıkardı. İşte
Dosyaları karşıya yüklemek ve taşımak çok kolay. Sorunum, geçerli bir dosya seçildiğinde onlara gösteriliyor. Çalışmak için şimdiye kadar verilen önerilerin hiçbirini alamadım. HTML5 gelince, ama her yerde olur o zamana kadar orada tarayıcıların toplu için çalışan bir çözüm yazmak zorundayım :-( –
Çoklu dosya yüklemeden önizleme seçin ve gecikmiş uplo ad http://anasthecoder.blogspot.in/2014/12/multi-file-select-preview-without.html – Ima
Birden çok görüntü önizlemesi için ayrıntılı makale http://codepedia.info/2015/06/html5-filereader -preview-image-show-küçük resim-resim-önce-sunucu-in-jquery/canlı demo ile –