วิธีสร้างประเภทอินพุต = ไฟล์ควรยอมรับเฉพาะ pdf และ xls

ฉันใช้ <input type= "file" name="Upload" >

ตอนนี้ฉันต้องการ จำกัด สิ่งนี้โดยยอมรับเฉพาะไฟล์. pdf และ. xls

เมื่อฉันคลิกปุ่มส่งควรตรวจสอบสิ่งนี้

และเมื่อฉันคลิกไฟล์ (PDF / XLS) บนหน้าเว็บมันควรจะเปิดขึ้นโดยอัตโนมัติ

ใครช่วยยกตัวอย่างเรื่องนี้ได้ไหม

คุณสามารถทำได้โดยใช้แอตทริบิวต์acceptและเพิ่มประเภทละครใบ้ที่อนุญาตลงไป แต่ไม่ใช่ทุกเบราว์เซอร์ที่เคารพแอตทริบิวต์นั้นและสามารถลบออกได้อย่างง่ายดายผ่านตัวตรวจสอบโค้ดบางตัว ดังนั้นไม่ว่าในกรณีใดคุณต้องตรวจสอบประเภทไฟล์ที่ฝั่งเซิร์ฟเวอร์ (คำถามที่สองของคุณ)

ตัวอย่าง:

<input type="file" name="upload" accept="application/pdf,application/vnd.ms-excel" />

สำหรับคำถามที่สามของคุณ "และเมื่อฉันคลิกไฟล์ (PDF / XLS) บนหน้าเว็บไฟล์จะเปิดขึ้นโดยอัตโนมัติ":

คุณไม่สามารถบรรลุสิ่งนั้นได้ วิธีการเปิด PDF หรือ XLS บนเครื่องไคลเอ็นต์ถูกกำหนดโดยผู้ใช้

คุณสามารถใช้สิ่งนี้:

HTML

<input name="userfile" type="file" accept="application/pdf, application/vnd.ms-excel" />

สนับสนุนเท่านั้น PDFและ. XLSไฟล์

น่าเสียดายที่ไม่มีวิธีรับประกันว่าจะทำได้ในช่วงเวลาที่เลือก

เบราว์เซอร์บางตัวรองรับacceptแอตทริบิวต์สำหรับinputแท็ก นี่เป็นการเริ่มต้นที่ดี แต่ไม่สามารถพึ่งพาได้อย่างสมบูรณ์

<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />

คุณสามารถใช้ a cfinputและเรียกใช้การตรวจสอบความถูกต้องเพื่อตรวจสอบนามสกุลไฟล์ในการส่ง แต่ไม่ใช่ประเภท mime สิ่งนี้ดีกว่า แต่ก็ยังไม่สามารถพิสูจน์ได้ ไฟล์บน OSX มักไม่มีนามสกุลไฟล์หรือผู้ใช้อาจติดป้ายกำกับประเภทไฟล์โดยมีเจตนาร้าย

ColdFusion cffileสามารถตรวจสอบประเภท mime โดยใช้contentTypeคุณสมบัติของผลลัพธ์ ( cffile.contentType) แต่สามารถทำได้หลังจากการอัปโหลดเท่านั้น นี่เป็นทางออกที่ดีที่สุดของคุณ แต่ก็ยังไม่ปลอดภัย 100% เนื่องจากประเภทละครใบ้อาจผิดพลาดได้

คุณสามารถใช้ JavaScript พิจารณาว่าปัญหาใหญ่ในการดำเนินการกับ JavaScript คือการรีเซ็ตไฟล์อินพุต สิ่งนี้ จำกัด เฉพาะ JPG เท่านั้น (สำหรับ PDF คุณจะต้องเปลี่ยนประเภทละครใบ้และหมายเลขเวทมนตร์ ):

<form id="form-id">
  <input type="file" id="input-id" accept="image/jpeg"/>
</form>

<script type="text/javascript">
    $(function(){
        $("#input-id").on('change', function(event) {
            var file = event.target.files[0];
            if(file.size>=2*1024*1024) {
                alert("JPG images of maximum 2MB");
                $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
                return;
            }

            if(!file.type.match('image/jp.*')) {
                alert("only JPG images");
                $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
                return;
            }

            var fileReader = new FileReader();
            fileReader.onload = function(e) {
                var int32View = new Uint8Array(e.target.result);
                //verify the magic number
                // for JPG is 0xFF 0xD8 0xFF 0xE0 (see https://en.wikipedia.org/wiki/List_of_file_signatures)
                if(int32View.length>4 && int32View[0]==0xFF && int32View[1]==0xD8 && int32View[2]==0xFF && int32View[3]==0xE0) {
                    alert("ok!");
                } else {
                    alert("only valid JPG images");
                    $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
                    return;
                }
            };
            fileReader.readAsArrayBuffer(file);
        });
    });
</script>

พิจารณาว่าสิ่งนี้ได้รับการทดสอบบน Firefox และ Chrome เวอร์ชันล่าสุดและบน IExplore 10

สำหรับรายการที่สมบูรณ์ของประเภทละครใบ้ดูวิกิพีเดีย

สำหรับรายการที่สมบูรณ์ของจำนวนมายากลดูวิกิพีเดีย

คุณสามารถลองทำตามวิธีต่อไปนี้

<input type= "file" name="Upload" accept = "application/pdf,.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">

หรือ (ใน asp.net mvc)

@Html.TextBoxFor(x => x.FileName, new { @id = "doc", @type = "file", @accept = "application/pdf,.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" })

ฉันจะกรองไฟล์ฝั่งเซิร์ฟเวอร์เนื่องจากมีเครื่องมือเช่น Live HTTP Headers บน Firefox ที่อนุญาตให้อัปโหลดไฟล์ใด ๆ รวมถึงเชลล์ ผู้คนสามารถแฮ็กไซต์ของคุณได้ ทำไซต์เซิร์ฟเวอร์เพื่อความปลอดภัย

แม้ว่าตัวอย่างนี้จะใช้สำหรับการอัปโหลดไฟล์หลายไฟล์ แต่ก็ให้ข้อมูลทั่วไปที่ต้องการ:

https://developer.mozilla.org/en-US/docs/DOM/File.type

เท่าที่ดำเนินการกับไฟล์เมื่อ / ดาวน์โหลด / นี่ไม่ใช่คำถาม Javascript แต่เป็นการกำหนดค่าเซิร์ฟเวอร์ หากผู้ใช้ไม่มีสิ่งที่ติดตั้งไว้เพื่อเปิดไฟล์ PDF หรือ XLS ทางเลือกเดียวของพวกเขาคือดาวน์โหลด

หากคุณต้องการให้ตัวควบคุมการอัปโหลดไฟล์ จำกัด ประเภทของไฟล์ที่ผู้ใช้สามารถอัปโหลดได้ด้วยการคลิกปุ่มนี่คือวิธี ..

<script type="text/JavaScript">
<!-- Begin
function TestFileType( fileName, fileTypes ) {
if (!fileName) return;

dots = fileName.split(".")
//get the part AFTER the LAST period.
fileType = "." + dots[dots.length-1];

return (fileTypes.join(".").indexOf(fileType) != -1) ?
alert('That file is OK!') : 
alert("Please only upload files that end in types: \n\n" + (fileTypes.join(" .")) + "\n\nPlease select a new file and try again.");
}
// -->
</script>

จากนั้นคุณสามารถเรียกใช้ฟังก์ชันจากเหตุการณ์เช่น onClick ของปุ่มด้านบนซึ่งมีลักษณะดังนี้:

onClick = "TestFileType (this.form.uploadfile.value, ['gif', 'jpg', 'png', 'jpeg']);"

คุณสามารถเปลี่ยนเป็น: PDFและXLS

คุณสามารถดูได้ที่นี่: การสาธิต

ลองอันนี้:-

              <MyTextField
                id="originalFileName"
                type="file"
                inputProps={{ accept: '.xlsx, .xls, .pdf' }}
                required
                label="Document"
                name="originalFileName"
                onChange={e => this.handleFileRead(e)}
                size="small"
                variant="standard"
              />