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\গুগল ক্রোমে ফাইলের নাম ব্যবহারের ক্ষেত্রে প্রদর্শিত হবে না .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>