소개
Web Applications는 FilereAder 객체를 사용하여 사용자의 컴퓨터에 저장된 파일 (또는 원시 데이터 버퍼)의 내용을 비동기로 읽을 수 있으며 파일 객체 또는 Blob 객체를 사용하여 처리 할 파일 또는 데이터를 지정할 수 있습니다. 파일 객체는 <input type = "text" /> 요소에서 파일을 선택한 후 사용자가 반환 한 filelist 객체에서 또는 Drag-and-Drop 조작에 의해 생성 된 DataTransfer 객체 또는 HTMLCANVASELENT에서 MozgetasFile () 메소드를 실행 한 후 리턴 결과에서 얻을 수 있습니다.
여러 페이지, 여러 사진 데모 코드를 업로드하십시오
<! doctype html> <html> <head> <title> 이미지를 업로드하여 미리보기 이미지를 표시하려면 </title> <style> #Result IMG {height : 100px; 디스플레이 : 인라인 블록; 마진 오른쪽 : 10px; 마진 바닥 : 10px; }. /> </p> <div id = "result"> <a href = "javaScript : void (0);"> 이미지 추가 </a> </a> </div> </div> </div> <div> <p> <label> 이미지 파일을 선택하십시오 : </label> <input type = "file"id = "file_input"style = "display : none;" /> </p> <div id="result"> <a href="javascript:void(0);">Add image</a> </div> </div> <script src="jquery-2.2.1.min.js"></script> <script> $(".add_img_btn").unbind("click").on("click",function(){ $ (this). result.innerhtml = "죄송합니다. 브라우저는 filereader를 지원하지 않습니다"; input.setattribute ( 'disabled', 'disabled'); } else {$ (input) .unbind ( "Change"). on ( "Change", function () {var file = this.files [0]; if (!/im $ (result) .Append ( '<img src = "'+this.result+'"/>')}}} </script> </body> </html>위의 내용은이 기사에 관한 모든 것이며, 모든 사람이 JavaScript 프로그래밍을 배우는 것이 도움이되기를 바랍니다.