jquery를 사용하여 업로드된 파일의 특정 콘텐츠를 가져옵니다.

이번에는 업로드된 파일의 특정 내용을 얻기 위해 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 중국어 웹사이트의 다른 관련 기사를 주목해 보세요.

추천 도서:

vue 프로젝트 API 인터페이스 관리 방법

로그인 시 사진 인증 코드를 만드는 노드

위 내용은 jquery를 사용하여 업로드된 파일의 특정 콘텐츠를 가져옵니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!