मेरे पास फ़ाइल अपलोड UI तत्व है जिसमें उपयोगकर्ता छवियां अपलोड करेगा। यहां मुझे क्लाइंट साइड में छवि की ऊंचाई और चौड़ाई को सत्यापित करना होगा। क्या जेएस में केवल फ़ाइल पथ वाले छवि का आकार ढूंढना संभव है?फ़ाइल अपलोड के दौरान जावास्क्रिप्ट का उपयोग करके छवि आयाम प्राप्त करें
नोट: यदि नहीं, तो ग्राहक पक्ष में आयामों को खोजने का कोई और तरीका है?
आप ब्राउज़रों कि W3C से नई File API समर्थन पर ऐसा कर सकते, FileReader इंटरफेस पर readAsDataURL समारोह का उपयोग कर और एक img की src (जिसके बाद आप height और की width पढ़ सकते हैं करने के लिए डेटा यूआरएल बताए छवि)। वर्तमान में फ़ायरफ़ॉक्स 3.6 फ़ाइल एपीआई का समर्थन करता है, और मुझे लगता है कि क्रोम और सफारी या तो पहले से ही कर रहे हैं या इसके बारे में हैं।
का पता लगाने ब्राउज़र फ़ाइल एपीआई (जो आसान है: if (typeof window.FileReader === 'function')) का समर्थन करता है या नहीं:
तो संक्रमणकालीन चरण के दौरान अपने तर्क कुछ इस तरह होगा।
यदि यह करता है, तो महान, डेटा को स्थानीय रूप से पढ़ें और आयामों को ढूंढने के लिए इसे एक छवि में डालें।
यदि नहीं, तो सर्वर को फ़ाइल अपलोड करें (शायद पृष्ठ को छोड़ने से बचने के लिए आईफ्रेम से फ़ॉर्म सबमिट करना), और उसके बाद सर्वर से पूछें कि छवि कितनी बड़ी है (या केवल अपलोड की गई छवि के लिए पूछना है, आप पसंद करेंगे)।
संपादित मैं कुछ समय के लिए फ़ाइल एपीआई का एक उदाहरण ऊपर काम करने के लिए किया गया है, जिसका अर्थ है; यहां एक है:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Show Image Dimensions Locally</title>
<style type='text/css'>
body {
font-family: sans-serif;
}
</style>
<script type='text/javascript'>
function loadImage() {
var input, file, fr, img;
if (typeof window.FileReader !== 'function') {
write("The file API isn't supported on this browser yet.");
return;
}
input = document.getElementById('imgfile');
if (!input) {
write("Um, couldn't find the imgfile element.");
}
else if (!input.files) {
write("This browser doesn't seem to support the `files` property of file inputs.");
}
else if (!input.files[0]) {
write("Please select a file before clicking 'Load'");
}
else {
file = input.files[0];
fr = new FileReader();
fr.onload = createImage;
fr.readAsDataURL(file);
}
function createImage() {
img = document.createElement('img');
img.onload = imageLoaded;
img.style.display = 'none'; // If you don't want it showing
img.src = fr.result;
document.body.appendChild(img);
}
function imageLoaded() {
write(img.width + "x" + img.height);
// This next bit removes the image, which is obviously optional -- perhaps you want
// to do something with it!
img.parentNode.removeChild(img);
img = undefined;
}
function write(msg) {
var p = document.createElement('p');
p.innerHTML = msg;
document.body.appendChild(p);
}
}
</script>
</head>
<body>
<form action='#' onsubmit="return false;">
<input type='file' id='imgfile'>
<input type='button' id='btnLoad' value='Load' onclick='loadImage();'>
</form>
</body>
</html>
फ़ायरफ़ॉक्स 3.6 पर बहुत अच्छा काम करता है। मैंने वहां किसी भी लाइब्रेरी का उपयोग करने से परहेज किया, इसलिए विशेषता (डीओएम 0) स्टाइल इवेंट हैंडलर और ऐसे के लिए क्षमा चाहते हैं।
नहीं, आप http हेडर बॉडी में सर्वर को भेज नहीं सकते हैं, फ़ाइल नाम और फ़ाइल सामग्री भेज सकते हैं, जावास्क्रिप्ट उन क्षेत्रों में हेरफेर नहीं कर सकता है।
क्या ग्राहक पक्ष में आयामों को खोजने का कोई और तरीका है? –
आपको इसे कहीं और अपलोड करने की आवश्यकता है, इसे सर्वर में जांचें और उन मानों को AJAX – YOU
के साथ वापस प्राप्त करें मुझे यकीन नहीं है कि फ़्लैश यह कर सकता है या नहीं, लेकिन जावा एप्लेट ऐसा करने में सक्षम होना चाहिए। या ऐसा लगता है कि एचटीएमएल 5 ऐसा कर सकता है, टी.जे. देखें। पाउडर का जवाब – YOU
यदि आप फ्लैश आधारित अपलोड जैसे SWFUpload का उपयोग करते हैं तो आपके पास सभी जानकारी हो सकती है और साथ ही कई कतारबद्ध अपलोड भी हो सकते हैं।
मैं SWFUpload की अनुशंसा करता हूं और उपयोगकर्ता के अलावा उनके साथ किसी भी तरह से जुड़ा हुआ नहीं हूं।
आप अपनी फ़ाइल लेने और अपलोड करने के लिए चांदी के नियंत्रण भी लिख सकते हैं।
+1 अच्छा लग रहा है! – YOU
बेशक, यह आवश्यक है कि आपके उपयोगकर्ता फ्लैश की अनुमति दें। फ्लैश-आधारित विज्ञापनों की वजह से, हम में से बहुत सारे फ्लैश को निश्चित रूप से ब्लॉक करते हैं। –
@ टीजेसी ने दिया, लेकिन एचटीएमएल 5 तक सर्वव्यापी फ्लैश/एक्टिवएक्स/सिल्वरलाइट/एक्सबैप इस तरह की स्थिति के लिए एकमात्र व्यवहार्य विकल्प है। –
एचटीएमएल 5 निश्चित रूप से सही समाधान है। आपको हमेशा भविष्य के लिए कोड करना चाहिए, अतीत नहीं। एचटीएमएल 4 ब्राउज़र से निपटने का सबसे अच्छा तरीका या तो खराब कार्यक्षमता पर वापस आना है या फ्लैश का उपयोग करना है (लेकिन केवल अगर ब्राउज़र एचटीएमएल 5 फाइल एपीआई का समर्थन नहीं करता है)
img.onload ईवेंट का उपयोग करने से आप इसे पुनर्प्राप्त कर सकेंगे फ़ाइल के आयाम। यह एक ऐप के लिए काम कर रहा है जिस पर मैं काम कर रहा हूं।
पिछले उदाहरण ठीक है, लेकिन यह बिल्कुल सही नहीं है।
var reader = new FileReader();
reader.onload = function(e)
{
var image = new Image();
image.onload = function()
{
console.log(this.width, this.height);
};
image.src = e.target.result;
};
reader.readAsDataURL(this.files[0]);
कूल! लेकिन मेरे मामले में जेएस अपलोड बटन पर दूसरे क्लिक के बाद कंसोल में लिखता है। क्या गलत है? –
ओह, एक उत्तर मिला: यह तत्व में 'ऑनक्लिक' की स्थापना 'अचूक' घटना होना चाहिए। वैसे भी, धन्यवाद गजस –
+1 पर किया जाना चाहिए, ऐसा करने का तरीका है। उदाहरण के लिए – YOU
धन्यवाद! – Pointy
मैंने आईओएस सफारी के माध्यम से उन्हें अपलोड करने से पहले छवियों के अभिविन्यास की जांच के लिए आपके समाधान का उपयोग किया (चूंकि आईओएस अपलोड के दौरान बहुत सारे एक्सिफ डेटा स्ट्रिप्स करता है, उदाहरण के लिए अभिविन्यास)। मैंने पाया कि छवि को प्रदर्शित होने पर आयामों को गलत मिला: कोई नहीं (यह चित्र मोड में चौड़ाई और ऊंचाई उलझन में है)। इसे हल करने का मेरा तरीका यह है कि इसे बाएं -10000 पीएक्स की पूर्ण स्थिति दें। किसी भी तरह से, आपके काम के लिए धन्यवाद। यह मुझे बहुत सारे सिरदर्द से बचाया। – stafffan