एचटीएमएल - फ़ाइल नाम

संभव डुप्लिकेट चयन करने के बाद प्रदर्शन छवि:
Preview an image before it is uploaded एचटीएमएल - फ़ाइल नाम

मैं एक रूप है कि ब्राउज़ करें और एक फ़ाइल का चयन करने के लिए

<input type="file" name="filename" accept="image/gif, image/jpeg, image/png">

के साथ मुझे अनुमति देता है।

मैं जो करना चाहता हूं वह छवि को चुनने के तुरंत बाद छवि को प्रदर्शित करना है। और यह फ़ॉर्म पर "सबमिट" बटन से पहले दबाया गया है, इसलिए छवि लगभग निश्चित रूप से ग्राहक पक्ष का निवास करती है। क्या यह किया जा सकता है?

स्रोत

2012-09-11 Edward Hasted

मल्टी फ़ाइल और अपलोड करने के बिना पूर्वावलोकन का चयन देरी uplo विज्ञापन http://anasthecoder.blogspot.in/2014/12/multi-file-select-preview-without.html – Ima

एकाधिक छवि पूर्वावलोकन के लिए विस्तृत लेख http://codepedia.info/2015/06/html5-filereader -preview-image-show-thumbnail-image-before-uploading-on-server-in-jquery/लाइव डेमो –

197

ये रहा:

एचटीएमएल

<!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>

स्क्रिप्ट:

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]); 
     } 
    }

Live Demo

स्रोत

2012-09-11 11:48:16 ygssoni

इतने लंबे समय तक लेने के लिए आवेदन। मैंने आपका जवाब संशोधित किया और यह पूरी तरह से काम करता है, लेकिन नहीं आईई जो मैंने मूल रूप से इसका परीक्षण किया। बहुत धन्यवाद। –

यह आईई पर काम नहीं करता है!आईई में FileReader क्लास नहीं है! – Rodrigo

मेरे लिए डेमो काम लेकिन मेरी साइट (स्थानीय होस्ट) में नहीं -> छवि अपलोड करने के बाद फ़ंक्शन (ई) क्यों नहीं कहा जा सकता है? – user1932595

आप नीचे दिए गए कोड के साथ इस लक्ष्य को हासिल कर सकते हैं:

$("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); 
    } 
});

डेमो: http://jsfiddle.net/ugPDx/

स्रोत

2012-09-11 11:45:23 Xavier

के साथ यह काम नहीं करता है। जब मैं JSFIDDLE परीक्षण साइट चलाता हूं तो मैं फ़ाइल नाम ब्राउज़ और चुन सकता हूं लेकिन कुछ भी प्रदर्शित नहीं होता है। आईई और ओपेरा में यह कोशिश की। मैं क्या गलत कर रहा हूं? –

दोनों JFiddle पृष्ठ पर और अपने पृष्ठ पर इसे लागू करने का प्रयास करते समय, मुझे त्रुटि मिलती है "e.originalEvent.srcElement अपरिभाषित है"। जब मैं e.originalEvent की जांच करता हूं, तो इसमें केवल गुण होते हैं: बुलबुले, रद्द करने योग्य, वर्तमान लक्ष्य, डिफ़ॉल्ट संरक्षित, ईवेंटफेस, स्पष्ट ऑरिजिनल लक्ष्य, isTrusted, originalTarget, target, timeStamp, type, और __proto__ है। अपलोड की गई फ़ाइल का नाम और कुछ विवरण e.orginalEvent.originalTarget.files के अंतर्गत उपलब्ध हैं, लेकिन मैं यह नहीं समझ सकता कि छवि के स्रोत को कहां ढूंढना है। –

यह एचटीएमएल 5 का उपयोग किया जा सकता है, लेकिन केवल उन ब्राउज़र इसका समर्थन में काम करेंगे। यहां एक example है।

ध्यान रखें कि आपको उन ब्राउज़र के लिए एक वैकल्पिक विधि की आवश्यकता होगी जो इसका समर्थन नहीं करते हैं। मुझे this plugin के साथ बहुत सफलता मिली है, जो आपके हाथों से बहुत अधिक काम करता है।

स्रोत

2012-09-11 11:47:08 Kelvin

फ़ाइलों को अपलोड करना और उन्हें स्थानांतरित करना आसान है। मेरी समस्या उन्हें उस समय प्रदर्शित कर रही है जब एक वैध फ़ाइल चुना गया है। मैं काम करने के लिए अब तक दिए गए किसी भी सुझाव को प्राप्त करने में सक्षम नहीं हूं। एचटीएमएल 5 के लिए इसे चालू करते हैं, लेकिन जब तक यह सर्वव्यापी नहीं हो जाता है, मुझे वहां एक ऐसे समाधान को लिखना पड़ता है जो ब्राउज़र के बड़े पैमाने पर काम करता है :-( –

एचटीएमएल - फ़ाइल नाम

उत्तर

संबंधित मुद्दे