jquery를 사용하여 업로드된 파일의 특정 콘텐츠를 가져옵니다.
- php中世界最好的语言원래의
- 2018-06-07 11:10:284210검색
이번에는 업로드된 파일의 특정 내용을 얻기 위해 jquery를 사용하는 방법을 보여 드리겠습니다. 업로드된 파일의 내용을 얻기 위해 jquery를 사용할 때 주의 사항은 무엇입니까?
파일을 서버에 업로드하기 전에 jquery를 통해 업로드된 파일의 이름, 유형 및 크기를 얻을 수 있습니다.
일반적으로 사용자가 태그를 통해 파일을 업로드하면 업로드된 파일의 이름을 볼 수 있습니다. HTML5 파일 API는 클라이언트 측에서 컴퓨터의 파일에 액세스하고 이러한 파일에 대한 작업을 더 잘 수행할 수 있는 안전한 방법을 제공합니다.
파일 API를 지원하는 브라우저에는 IE10+, Firefox4+, Safari5.0.5+, Opera11.1+ 및 Chrome이 포함됩니다.
파일 API는 양식의 파일 입력 필드를 기반으로 파일 정보에 직접 액세스할 수 있는 일부 인터페이스를 추가합니다. HTML5는 파일 입력 요소에 대한 DOM에 파일 컬렉션을 추가합니다. 파일 입력 필드를 통해 하나 이상의 파일을 선택하면 파일 컬렉션에는 파일 개체 집합이 포함되며, 각 파일 개체는 파일에 해당합니다. 각 파일에는 다음과 같은 읽기 전용 속성이 있습니다.
name: 로컬 파일 시스템의 파일 이름입니다.
크기: 파일의 바이트 수입니다.
type: 파일의 MIME 유형입니다.
lastModifiedDate: 파일이 마지막으로 수정된 시간입니다.
이 파일 인터페이스를 통해 jquery에서 업로드된 파일의 이름, 유형 및 크기를 얻을 수 있습니다. 아래 데모를 통해 그 효과를 경험해 보세요.
1. "파일 선택" 버튼을 사용하여 업로드할 파일을 선택할 수 있습니다.
2. 파일 선택 후 "업로드된 파일 상세정보 표시" 버튼을 클릭하시면 해당 파일의 상세정보를 보실 수 있습니다.
여러 파일을 동시에 업로드하려면 파일 업로드 태그에 다중 속성을 추가해야 합니다. 위 데모의 HTML 구조는 다음과 같습니다.
<input id="fUpload" multiple type="file" /><br /> <ul id="ulList"> </ul> <input id="btnShow" type="button" value="显示上传文件的详细详细" />
jquery 코드에서는 선택된 파일 개수를 먼저 감지한 후 루프를 통해 각 파일의 세부 정보를 가져옵니다. 전체 jquery 코드는 다음과 같습니다.
$("#btnShow").on('click', function () {
$("#ulList").empty();
var fp = $("#fUpload");
var lg = fp[0].files.length; // get length
var items = fp[0].files;
var fragment = "";
if (lg > 0) {
for (var i = 0; i < lg; i++) {
var fileName = items[i].name; // get file name
var fileSize = items[i].size; // get file size
var fileType = items[i].type; // get file type
// append li to UL tag to display File info
fragment += "<li>" + fileName + " (<b>" + fileSize + "</b> bytes) - Type :" + fileType + "</li>";
}
$("#ulList").append(fragment);
}
});
이 기사의 사례를 읽으신 후 방법을 마스터하셨으리라 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목해 보세요.
추천 도서:
위 내용은 jquery를 사용하여 업로드된 파일의 특정 콘텐츠를 가져옵니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!