Cách tạo input type = file Chỉ chấp nhận pdf và xls

Tôi đã sử dụng <input type= "file" name="Upload" >

Bây giờ tôi muốn hạn chế điều này bằng cách chỉ chấp nhận các tệp .pdf và .xls.

Khi tôi nhấp vào nút gửi, nó sẽ xác thực điều này.

Và khi tôi nhấp vào các tệp (PDF / XLS) trên trang web, nó sẽ tự động mở.

Bất cứ ai có thể vui lòng cho một số ví dụ cho điều này?

Bạn có thể làm như vậy bằng cách sử dụng thuộc tính acceptvà thêm các loại kịch câm được phép vào đó. Nhưng không phải tất cả các trình duyệt đều tôn trọng thuộc tính đó và nó có thể dễ dàng bị xóa thông qua một số trình kiểm tra mã. Vì vậy, trong cả hai trường hợp, bạn cần kiểm tra loại tệp ở phía máy chủ (câu hỏi thứ hai của bạn).

Thí dụ:

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

Đối với câu hỏi thứ ba của bạn "Và khi tôi nhấp vào tệp (PDF / XLS) trên trang web, nó sẽ tự động mở.":

Bạn không thể đạt được điều đó. Cách mở tệp PDF hoặc XLS trên máy khách do người dùng đặt.

bạn có thể sử dụng cái này:

HTML

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

chỉ hỗ trợ. PDF và. Tệp XLS

Thật không may, không có cách nào được đảm bảo để làm điều đó tại thời điểm lựa chọn.

Một số trình duyệt hỗ trợ acceptthuộc tính cho inputthẻ. Đây là một khởi đầu tốt, nhưng không thể dựa dẫm hoàn toàn.

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

Bạn có thể sử dụng a cfinputvà chạy xác thực để kiểm tra phần mở rộng tệp khi gửi, nhưng không phải kiểu kịch câm. Điều này là tốt hơn, nhưng vẫn không phải là chống lừa. Các tệp trên OSX thường không có phần mở rộng tệp hoặc người dùng có thể gắn nhãn sai các loại tệp một cách độc hại.

ColdFusion cffilecó thể kiểm tra kiểu kịch câm bằng cách sử dụng thuộc contentTypetính result ( cffile.contentType), nhưng điều đó chỉ có thể được thực hiện sau khi tải lên. Đây là đặt cược tốt nhất của bạn, nhưng vẫn không an toàn 100% vì kiểu kịch câm vẫn có thể sai.

Bạn có thể sử dụng JavaScript. Hãy lưu ý rằng vấn đề lớn khi thực hiện điều này với JavaScript là đặt lại tệp đầu vào. Chà, điều này chỉ giới hạn ở JPG (đối với PDF, bạn sẽ phải thay đổi loại kịch câm và số ma thuật ):

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

Hãy lưu ý rằng điều này đã được thử nghiệm trên các phiên bản Firefox và Chrome mới nhất cũng như trên IExplore 10.

Để có danh sách đầy đủ các loại kịch câm, hãy xem Wikipedia .

Để có danh sách đầy đủ về số ma thuật, hãy xem Wikipedia .

Tôi sẽ lọc phía máy chủ tệp, vì có các công cụ, chẳng hạn như Tiêu đề HTTP trực tiếp trên Firefox cho phép tải lên bất kỳ tệp nào, bao gồm cả trình bao. Mọi người có thể hack trang web của bạn. Làm điều đó trên trang web máy chủ, để được an toàn.

Mặc dù ví dụ cụ thể này dành cho tải lên nhiều tệp, nhưng nó cung cấp thông tin chung mà người ta cần:

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

Đối với hành động của một tệp khi / tải xuống / đây không phải là một câu hỏi về Javascript - mà là một cấu hình máy chủ. Nếu người dùng chưa cài đặt thứ gì đó để mở tệp PDF hoặc XLS, lựa chọn duy nhất của họ sẽ là tải xuống.

Nếu bạn muốn kiểm soát tải lên tệp thành Giới hạn loại tệp người dùng có thể tải lên khi nhấp vào nút thì đây là cách ..

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

Sau đó, bạn có thể gọi hàm từ một sự kiện như onClick của nút ở trên, trông giống như:

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

Bạn có thể thay đổi điều này thành: PDFvàXLS

Bạn có thể nhìn thấy nó được thực hiện ở đây: Demo