jQuery: รับชื่อไฟล์ที่เลือกจาก <input type =“ file” />


90

รหัสนี้ควรใช้งานได้ใน IE (อย่าแม้แต่ทดสอบใน Firefox) แต่ก็ไม่สามารถใช้ได้ สิ่งที่ฉันต้องการคือการแสดงชื่อของไฟล์ที่แนบมา ความช่วยเหลือใด ๆ

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

ตรวจสอบคำตอบของฉันฉันเชื่อว่าเป็นวิธีที่ดีที่สุดและเข้าใจได้มากที่สุดในการบรรลุเป้าหมายนี้
James111

คำตอบ:


147

มันง่ายมากเช่นการเขียน:

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

อย่างไรก็ตามฉันขอแนะนำให้ใช้แอตทริบิวต์ชื่อหรือรหัสเพื่อเลือกข้อมูลที่คุณป้อน และด้วยเหตุการณ์ควรมีลักษณะดังนี้:

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

ขอขอบคุณ! นั่นใช้ได้กับปัญหาก่อนหน้านี้ (และทำให้ง่ายขึ้น) ที่ฉันวางไว้ แต่มันใช้ไม่ได้กับเวอร์ชันเพิ่มเติม

วิธีรับเส้นทางที่สมบูรณ์ของไฟล์รหัสด้านบนให้ชื่อไฟล์เท่านั้น
Khurram Ijaz

3
@PHP Priest คุณทำไม่ได้ เบราว์เซอร์ไม่เปิดเผยข้อมูลประเภทนั้น
zneak

2
@PHP Priest ถ้าคุณทำได้คุณสามารถส่งข้อมูลเกี่ยวกับระบบไฟล์ของผู้ใช้ได้อย่างลับๆผ่าน AJAX และผู้ใช้อาจไม่มีทางรู้ ลองนึกดูว่าจะแย่กว่านี้มากแค่ไหนหากคุณสามารถตั้งค่าของไฟล์ที่ป้อนโดยทางโปรแกรมได้ ใช่. ปัญหาด้านความปลอดภัย.
jinglesthula

1
ดูเหมือนว่าด้านบนเล็กน้อย? วิธีที่ฉันระบุไว้นั้นง่ายกว่าและเข้าใจได้มาก
James111

20

วิธีที่ง่ายที่สุดคือใช้บรรทัดต่อไปนี้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

ในการรับประเภทของไฟล์:

ถ้าฉันจะอัปโหลด PNG มันจะกลับมา image/png

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

ในการรับขนาด (เป็นไบต์) ของไฟล์:

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

นอกจากนี้คุณไม่จำเป็นต้องใช้คำสั่งเหล่านี้on('change'คุณสามารถรับค่าได้ตลอดเวลาเช่นคุณอาจอัปโหลดไฟล์และเมื่อผู้ใช้คลิกuploadคุณก็ใช้คำสั่งที่ฉันระบุไว้


เหตุใดฉันจึงได้รับข้อผิดพลาดไม่สามารถอ่านคุณสมบัติ 'ชื่อ' ของไม่ได้กำหนด?
Gagantous

19
$('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()ในกรณีของการใช้


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

ขอบคุณ! สิ่งนี้มีประโยชน์ในการจับชื่อจริงของไฟล์ที่อัปโหลดไม่ใช่เส้นทางแบบเต็ม
Evan M

3

ฉันใช้สิ่งต่อไปนี้ซึ่งทำงานได้อย่างถูกต้อง

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


1

เพิ่มปุ่มรีเซ็ตที่ซ่อนอยู่:

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

คลิกปุ่มรีเซ็ตเพื่อล้างข้อมูลที่ป้อน

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

1
คุณสามารถคลิกปุ่มที่ซ่อนอยู่ได้หรือไม่?
DaveWalley

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

ขอบคุณที่ฉันค้นหาสิ่งนี้ฉันรู้ว่านี่ไม่ใช่เรื่อง แต่เป็นคำตอบของฉันที่คุณรู้;)
Tarek น่ายินดี
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.