집 > 기사 > 웹 프론트엔드 > jquery는 업로드된 파일 세부정보를 가져옵니다.

jquery는 업로드된 파일 세부정보를 가져옵니다.

php中世界最好的语言원래의: 2018-04-27 16:05:522902검색

이번에는 업로드된 파일의 자세한 정보를 얻기 위해 jquery를 가져오겠습니다. jquery가 업로드된 파일의 세부 정보를 얻기 위한 주의 사항은 무엇입니까? 다음은 실제 사례입니다.

파일을 서버에 업로드하기 전에 jquery를 통해 업로드된 파일의 이름, 유형 및 크기를 얻을 수 있습니다.

일반적으로 사용자가 태그를 통해 파일을 업로드하면 업로드된 파일의 이름을 볼 수 있습니다. HTML5 파일 API는 클라이언트 측에서 컴퓨터의 파일에 액세스하고 이러한 파일에 대한 작업을 더 잘 수행할 수 있는 안전한 방법을 제공합니다.

파일 API를 지원하는 브라우저에는 IE10+, Firefox4+, Safari5.0.5+, Opera11.1+ 및 Chrome이 포함됩니다.

파일 API는 양식의 파일 입력 필드를 기반으로 파일 정보에 직접 액세스할 수 있는 일부 인터페이스를 추가합니다. HTML5는 파일 입력 요소에 대한 DOM에 파일 컬렉션을 추가합니다. 파일 입력 필드를 통해 하나 이상의 파일을 선택하면 파일 컬렉션에는 파일 개체 집합이 포함되며, 각 파일 개체는 파일에 해당합니다. 각 파일에는 다음과 같은 읽기 전용 속성이 있습니다.

이름: 로컬 파일 시스템의 파일 이름입니다.
크기: 파일의 바이트 수입니다.
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 중국어 웹사이트의 다른 관련 기사를 주목해 보세요.