एक छवि द्वारा इनपुट प्रकार = फ़ाइल बदलें

Question 1

बहुत से लोगों की तरह, मैं बदसूरत को अनुकूलित करना चाहता हूं input type=file, और मुझे पता है कि यह कुछ हैक्स और / या के बिना नहीं किया जा सकता है javascript। लेकिन, बात यह है कि मेरे मामले में अपलोड फाइल बटन सिर्फ इमेज अपलोड करने के लिए हैं ( jpeg | jpg | p | gif ), इसलिए मैं सोच रहा था कि क्या मैं एक " clickable" इमेज का उपयोग कर सकता हूं जो बिल्कुल इनपुट टाइप फाइल के रूप में कार्य करेगा? डायलॉग बॉक्स दिखाएं, और सबमिट किए गए पृष्ठ पर समान $ _FILE)।
मुझे यहां कुछ वर्कअराउंड मिला , और यह दिलचस्प भी (लेकिन क्रोम = / पर काम नहीं करता है)।

जब आप अपनी फ़ाइल बटनों में कुछ शैली जोड़ना चाहते हैं तो आप लोग क्या करते हैं? यदि आपके पास इसके बारे में कोई दृष्टिकोण है, तो बस उत्तर बटन दबाएं;)

Question 2

यह मेरे लिए बहुत अच्छा काम करता है:

.image-upload>input {
  display: none;
}

<div class="image-upload">
  <label for="file-input">
    <img src="https://icon-library.net/images/upload-photo-icon/upload-photo-icon-21.jpg"/>
  </label>

  <input id="file-input" type="file" />
</div>

स्निपेट का विस्तार करें

मूल रूप से के लिए लेबल की विशेषता यह बनाता है ताकि लेबल पर क्लिक निर्दिष्ट इनपुट क्लिक करने के रूप में एक ही है ।

इसके अलावा, डिस्प्ले प्रॉपर्टी को कोई भी सेट नहीं करता है, ताकि फ़ाइल इनपुट बिल्कुल भी रेंडर न हो, यह अच्छा और साफ छिपा हो।

क्रोम में परीक्षण किया गया है लेकिन वेब के अनुसार सभी प्रमुख ब्राउज़रों पर काम करना चाहिए। :)

संपादित करें: यहाँ JSField जोड़ा गया: https://jsfiddle.net/c5s42vdz/

Question 3

वास्तव में यह शुद्ध सीएसएस में किया जा सकता है और यह बहुत आसान है ...

HTML कोड

<label class="filebutton">
Browse For File!
<span><input type="file" id="myfile" name="myfile"></span>
</label>

सीएसएस शैलियाँ

label.filebutton {
    width:120px;
    height:40px;
    overflow:hidden;
    position:relative;
    background-color:#ccc;
}

label span input {
    z-index: 999;
    line-height: 0;
    font-size: 50px;
    position: absolute;
    top: -2px;
    left: -700px;
    opacity: 0;
    filter: alpha(opacity = 0);
    -ms-filter: "alpha(opacity=0)";
    cursor: pointer;
    _cursor: hand;
    margin: 0;
    padding:0;
}

विचार यह है कि इनपुट को आपके लेबल के बिल्कुल अंदर रखें। इनपुट के फ़ॉन्ट आकार को कुछ बड़े पर सेट करें, जिससे "ब्राउज़" बटन का आकार बढ़ जाएगा। इसके बाद आपके लेबल के पीछे इनपुट ब्राउज़ बटन को स्थिति देने के लिए नकारात्मक वाम / शीर्ष गुणों का उपयोग करके कुछ परीक्षण और त्रुटि होती है।

बटन को स्थिति में रखते समय, अल्फा को 1 पर सेट करें। जब आप इसे 0 पर सेट कर चुके हों (तो आप देख सकते हैं कि आप क्या कर रहे हैं!)

सुनिश्चित करें कि आप ब्राउज़र में परीक्षण करते हैं क्योंकि वे सभी इनपुट बटन को थोड़ा अलग आकार प्रदान करेंगे।

Question 4

@Hardsetting द्वारा महान समाधान, लेकिन मैंने इसे विंडोज़ में सफारी (5.1.7) के साथ काम करने के लिए कुछ सुधार किए

.image-upload > input {
  visibility:hidden;
  width:0;
  height:0
}

<div class="image-upload">
  <label for="file-input">
    <img src="https://placehold.it/100/000000/ffffff?text=UPLOAD" style="pointer-events: none"/>
  </label>

  <input id="file-input" type="file" />
</div>

स्निपेट का विस्तार करें

मैंने सफारी मुद्दे के visibility: hidden, width:0बजाय उपयोग किया है display: noneऔर इसमें जोड़ा pointer-events: noneगया हैimg टैग है ताकि यह काम कर सके यदि इनपुट फ़ाइल प्रकार टैग FORM टैग में है।

सभी प्रमुख ब्राउज़रों में मेरे लिए काम कर रहा है।

आशा है कि यह किसी की मदद करता है।

Question 5

मैं SWFUpload या Uploadify का उपयोग करता हूं । उन्हें फ्लैश की आवश्यकता है लेकिन आप उन सभी चीजों को करते हैं जो आप बिना किसी परेशानी के चाहते हैं।

<input type="file">वास्तविक नियंत्रण पर क्लिक करने के अलावा किसी भी समय "ओपन फाइल" संवाद को ट्रिगर करने की कोशिश करने वाले किसी भी आधारित समाधान को किसी भी समय सुरक्षा कारणों से ब्राउज़र से हटाया जा सकता है। (मुझे लगता है कि एफएफ और आईई के वर्तमान संस्करणों में, उस कार्यक्रम को प्रोग्रामिक रूप से ट्रिगर करना संभव नहीं है।)

Question 6

अगर मुझे आपकी बात मिल गई तो यह मेरी विधि है

एचटीएमएल

<label for="FileInput">
    <img src="tools/img/upload2.png" style="cursor:pointer" onmouseover="this.src='tools/img/upload.png'" onmouseout="this.src='tools/img/upload2.png'" alt="Injaz Msila" style="float:right;margin:7px" />
</label>
<form action="upload.php">
    <input type="file" id="FileInput" style="cursor: pointer;  display: none"/>
    <input type="submit" id="Up" style="display: none;" />
</form>

jQuery

<script type="text/javascript">
    $( "#FileInput" ).change(function() {
      $( "#Up" ).click();
    });
</script>

Question 7

यह वास्तव में सरल आप यह कोशिश कर सकते हैं:

$("#image id").click(function(){
    $("#input id").click();
});

Question 8

आप इसके बजाय एक छवि डाल सकते हैं, और इसे इस तरह से कर सकते हैं:

HTML:

<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" />
<input type="file" id="file1"  name="file1" style="display:none" />

JQuery:

$("#upfile1").click(function () {
    $("#file1").trigger('click');
});

गुफा : IE9 और IE10 में यदि आप जावास्क्रिप्ट के माध्यम से फाइल इनपुट में ऑनक्लिक को ट्रिगर करते हैं तो फॉर्म को 'खतरनाक' के रूप में चिह्नित किया जाता है और इसे जावास्क्रिप्ट के साथ प्रस्तुत नहीं किया जा सकता है, अगर यह पारंपरिक रूप से प्रस्तुत नहीं किया जा सकता है।

Question 9

इनपुट खुद सीएसएस दृश्यता के साथ छिपा हुआ है: छिपा हुआ।

फिर आपके पास जो भी तत्व हो - ऐंकर या छवि .., जब एंकर / छवि पर क्लिक किया जाता है, तो छिपे हुए इनपुट फ़ील्ड पर एक क्लिक को ट्रिगर करें - एक फ़ाइल का चयन करने के लिए संवाद बॉक्स दिखाई देगा।

EDIT: वास्तव में यह क्रोम और सफारी में काम करता है, मैंने अभी देखा कि FF4Beta में ऐसा नहीं है

Question 10

काम कोड:

बस इनपुट भाग छिपाएँ और इस तरह से करें।

<div class="ImageUpload">
   <label for="FileInput">
      <img src="../../img/Upload_Panel.png" style="width: 18px; margin-top: -316px; margin-left: 900px;"/>
   </label>

  <input id="FileInput" type="file" onchange="readURL(this,'Picture')" style="cursor: pointer;  display: none"/>
</div>

Question 11

        form input[type="file"] {
          display: none;
        }

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
  <title>Simple File Upload</title>
  <meta name="" content="">
</head>

<body>
  <form action="upload.php" method="post" enctype="multipart/form-data">
    Select image to upload:
    <label for="fileToUpload">
      <img src="http://s3.postimg.org/mjzvuzi5b/uploader_image.png" />
    </label>
    <input type="File" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Upload Image" name="submit">
  </form>
</body>

</html>

स्निपेट का विस्तार करें

भागो SNIPPET या बस उपरोक्त कोड की प्रतिलिपि बनाएँ और निष्पादित करें। आपको वही मिलेगा जो आप चाहते थे। जावास्क्रिप्ट के बिना बहुत सरल और प्रभावी। का आनंद लें!!!

Question 12

पिछले एक दशक में छिपे हुए और दृश्यमान इनपुट्स के साथ मेरे पास बहुत सारे मुद्दे हैं, कभी-कभी चीजें हमारे विचार से अधिक सरल होती हैं।

मुझे अस्पष्टता का समर्थन नहीं करने के लिए IE 5,6,7,8 और 9 के साथ थोड़ी इच्छा हुई है और इस प्रकार फ़ाइल इनपुट अपलोड छवि को कवर करेगा हालांकि निम्नलिखित सीएसएस कोड ने समस्या को हल किया है।

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);

निम्नलिखित स्निप को क्रोम पर परीक्षण किया गया है, IE 5,6,7,8,9,10 IE 5 में एकमात्र मुद्दा यह है कि यह ऑटो मार्जिन का समर्थन नहीं करता है।

स्निपेट को बस कॉपी करें और सीएसएस और एचटीएमएल पेस्ट करें जैसा कि आप चाहते हैं आकार को संशोधित करें।

.file-upload{
	height:100px;
	width:100px;
	margin:40px auto;
	border:1px solid #f0c0d0;
	border-radius:100px;
	overflow:hidden;
	position:relative;
}
.file-upload input{
	position:absolute;
	height:400px;
	width:400px;
	left:-200px;
	top:-200px;
	background:transparent;
	opacity:0;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);  
}
.file-upload img{
	height:70px;
	width:70px;
	margin:15px;
}

<div class="file-upload">
<!--place upload image/icon first !-->
<img src="https://i.stack.imgur.com/dy62M.png" />
<!--place input file last !-->
<input type="file" name="somename" />
</div>

स्निपेट का विस्तार करें