jQuery: <इनपुट प्रकार = "फ़ाइल" /> से चयनित फ़ाइल नाम प्राप्त करें

Question 1

यह कोड IE में काम करना चाहिए (फ़ायरफ़ॉक्स में भी इसका परीक्षण न करें), लेकिन ऐसा नहीं है। मैं जो चाहता हूं वह संलग्न फ़ाइल का नाम प्रदर्शित करना है। कोई मदद?

<html>
<head>
  <title>example</title>    
  <script type="text/javascript" src="../js/jquery.js"></script>
  <script type="text/javascript">  
        $(document).ready( function(){            
      $("#attach").after("<input id='fakeAttach' type='button' value='attach a file' />");      
      $("#fakeAttach").click(function() {            
        $("#attach").click();        
        $("#maxSize").after("<div id='temporary'><span id='attachedFile'></span><input id='remove' type='button' value='remove' /></div>");        
        $('#attach').change(function(){
          $("#fakeAttach").attr("disabled","disabled");          
          $("#attachedFile").html($(this).val());
        });        
        $("#remove").click(function(e){
          e.preventDefault();
          $("#attach").replaceWith($("#attach").clone());
          $("#fakeAttach").attr("disabled","");
          $("#temporary").remove();
        });
      })
    }); 
  </script> 
</head>
<body>
  <input id="attach" type="file" /><span id="maxSize">(less than 1MB)</span>    
</body>
</html>

Question 2

यह लिखने जैसा ही सरल है:

$('input[type=file]').val()

वैसे भी, मैं आपके इनपुट का चयन करने के लिए नाम या आईडी विशेषता का उपयोग करने का सुझाव देता हूं। और घटना के साथ, यह इस तरह दिखना चाहिए:

$('input[type=file]').change(function(e){
  $in=$(this);
  $in.next().html($in.val());
});

Question 3

सबसे सरल तरीका यह है कि आप निम्नलिखित पंक्ति का jqueryउपयोग करें, इसका उपयोग करने पर आपको /fakepathबकवास नहीं मिलती है , आप सीधे उस फ़ाइल को प्राप्त करते हैं जो जारी की गई थी:

$('input[type=file]')[0].files[0]; // This gets the file
$('#idOfFileUpload')[0].files[0]; // This gets the file with the specified id

कुछ अन्य उपयोगी आदेश हैं:

फ़ाइल का नाम पाने के लिए:

$('input[type=file]')[0].files[0].name; // This gets the file name

फ़ाइल का प्रकार प्राप्त करने के लिए:

अगर मैं पीएनजी अपलोड करता, तो यह वापस आ जाता image/png

$("#imgUpload")[0].files[0].type

फ़ाइल का आकार (बाइट्स में) पाने के लिए:

$("#imgUpload")[0].files[0].size

इसके अलावा on('change', आपको इन आदेशों का उपयोग करने की आवश्यकता नहीं है , आप किसी भी समय मान प्राप्त कर सकते हैं, उदाहरण के लिए आपके पास फ़ाइल अपलोड हो सकती है और जब उपयोगकर्ता क्लिक करता है upload, तो आप बस उन कमांड का उपयोग करते हैं जिन्हें मैंने सूचीबद्ध किया था।

Question 4

$('input[type=file]').change(function(e){
    $(this).parents('.parent-selector').find('.element-to-paste-filename').text(e.target.files[0].name);
});

C:\fakepath\उपयोग करने के मामले में यह कोड Google Chrome में फ़ाइल नाम से पहले नहीं दिखाई देगा .val()।

Question 5

<input onchange="readURL(this);"  type="file" name="userfile" />
<img src="" id="blah"/>
<script>
 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]);
        //console.log(reader);
        //alert(reader.readAsDataURL(input.files[0]));
    }
}
</script>

Question 6

मैंने निम्नलिखित का उपयोग किया था जो सही ढंग से काम करता था।

$('#fileAttached').attr('value', $('#attachment').val())

Question 7

//get file input
var $el = $('input[type=file]');
//set the next siblings (the span) text to the input value 
$el.next().text( $el.val() );

Question 8

एक छिपा हुआ रीसेट बटन जोड़ें:

<input id="Reset1" type="reset" value="reset" class="hidden" />

इनपुट खाली करने के लिए रीसेट बटन पर क्लिक करें।

$("#Reset1").click();

Question 9

<input onchange="readURL(this);"  type="file" name="userfile" />
<img src="" id="viewImage"/>
<script>
 function readURL(fileName) {
    if (fileName.files && fileName.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#viewImage')
                    .attr('src', e.target.result)
                    .width(150).height(200);
        };

        reader.readAsDataURL(fileName.files[0]);
    }
}
</script>