HTML5에는 양식 관련 속성이 많이 추가되었습니다. 솔직히 말해서 이런 것들은 정말 사려 깊습니다! ! ! 대체로:
잘못된 시간에 옳은 일을 하는 사람은 옳은 것처럼 보이지만 사실은 옳은 것입니다. . . 그러나 당신은 그가 틀렸다는 것을 알게 될 것입니다. . . .
|
项目
|
个人理解
|
|
figure/figcaption
|
据说表示页面独立内容，移除后无影响，暂无发现用处..
|
|
details
|
该标签有点意思，用于替代js中，元素收起展开功能。
最新ff都不支持……个人觉得，既然提供了该标签应该提供属性表示上下展开或者左右展开；
|
|
mark
|
高亮显示，当真语义化
|
|
progress
|
屌丝们，可以告别gif图片了，也不用div模拟百分比了，与windows区域一致的进度条出现啦，异步文件上传更加完善！
|
|
改良ol
|
老夫就没有用过这个主。。。
|
|
……
|
프로젝트
|
개인의 이해
|
그림/캡션
|
페이지의 독립적인 콘텐츠를 나타낸다고 합니다. 삭제된 후에도 아무런 영향이 없습니다..
|
자세히
|
이 태그는 js에서 요소 축소 및 확장 기능을 대체하는 데 사용됩니다.
최신 ff는 지원하지 않습니다... 개인적으로 이 태그가 제공되기 때문에 상하 또는 좌우 확장을 나타내는 속성을 제공해야 합니다.
|
마크
|
강조 표시, 진정한 의미
|
진행 상황
|
다이아몬드님, gif 이미지와 작별하세요. 백분율을 시뮬레이션하기 위해 div를 사용할 필요가 없습니다. 창 영역과 일치하는 진행률 표시줄이 나타나고 비동기 파일 업로드가 더 완벽해졌습니다!
|
개선됨
|
저는 이 마스터를 사용해본 적이 없습니다. . .
|
……
위의 요소는 필수 요소이므로 자세히 설명할 필요가 없습니다. 다음으로 이 글의 주인공이 등장합니다.
파일 API
FileList 및 파일 객체:
HTML4에서는 파일 태그를 사용하면 하나의 파일만 선택할 수 있지만, HTML5에서는 파일 태그에 multiple 속성을 설정하면 여러 파일을 선택할 수 있습니다! ! !
선택을 하면 여기의 filelist 객체가 생성되는데, 이는 간단히 말해서 파일 배열입니다.
파일 객체에는 2개의 속성이 있으며, name은 파일 이름(경로 제외)을 나타내고, lastModifiedDate는 마지막 수정 시간을 나타냅니다.
사실 HTML4에서 파일을 조작하면 파일 크기 등 많은 로컬 속성을 얻을 수 있는데, 사악한 IE는 이를 지원하지 않고 IE9 이후에는 개선됐다.
그래서 클라이언트에서 너무 큰 파일을 업로드하라고 하면 포기해주세요. . .
블롭 개체
은 바이너리 원시 데이터를 나타내고 바이트 내부 원시 데이터에 액세스하기 위한 슬라이스 메소드를 제공합니다. size는 blob 객체의 바이트 길이를 나타내고, type은 해당 MIME 유형을 나타내며, 유형을 알 수 없는 경우 빈 문자열이 반환됩니다.
자, 간단한 실험을 해보세요:
파일 정보 </title> ;<br /> <script src="../jquery-1.7.1.js" type="text/javascript"></script><br> <script type="text/javascript"> <br> $ (문서).ready(함수 () {<br> $('#wl').click(함수 () {<br> var f = $('#file')[0];<br> <br> var s = '';<br> <br> });<br> });<br> </script><br> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script>
</head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><br> <body><br> <input type="file" id="file" multiple /><br> <button id="wl"><br> 파일 업로드</button><br> </body><br> < /html><br> </div>
<br>
<p>ff에서 사진을 선택한 후 제출하고 중단점을 설정한 후 살펴보세요. </p>
<p><img alt="" src="http://files.jb51.net/file_images/article/201304/2013042415535523.jpg"></p>
<p>파일의 주인공이 등장하는데 바로 그 사람입니다. 속성을 출력하여 확인해 보겠습니다. </p>
<p><img alt="" src="http://files.jb51.net/file_images/article/201304/2013042415535524.jpg"></p>
<p>정말 있을 건 다 있어요! 하지만 이 속성으로 할 수 있는 일은 많습니다. . . ie7과 8을 살펴보겠습니다. </p>
<p><img alt="" src="http://files.jb51.net/file_images/article/201304/2013042415535525.jpg"></p>
<p>시청자 여러분 저는 그런 속성이 전혀 없어서 다재다능합니다. . . </p>
<p><strong>그나저나 IE 브라우저 디버깅이 너무 힘든 것 같아요. ff의 Firebug나 Google 자체 플러그인처럼 좋은 IE 개발 플러그인이 있나요? ? </strong></p>
<p> </p>
<p><strong>FIleReader 인터페이스</strong> </p>
<p>파일 판독기 인터페이스는 파일을 메모리로 읽어올 수 있어 사진을 편안하게 미리 볼 수 있지만 그 유용성은 그 이상입니다. </p>
<p><strong>파일 리더의 네 가지 방법: </strong></p>
<p>readAsBinaryString은 파일을 바이너리 코드로 읽습니다. 일반적으로 데이터를 백엔드로 전달합니다. </p>
<p>readAsText는 파일을 텍스트로 읽습니다. - 텍스트 내용을 읽습니다. </p>
<p>readAsURL은 파일을 DataURL로 읽습니다. 일반적으로 작은 파일, 이미지 또는 HTML입니다. </p>
<p>중단하면 파일이 너무 크고 대기 시간이 너무 길어 읽기가 중단됩니다</p>
<p> </p>
<p><strong>filereader 인터페이스 이벤트: </strong></p>
<p>읽기 중단 트리거 </p>
<p>읽기에 실패하면 오류가 발생합니다. </p>
<p>읽기 시작 시 onloadstart가 트리거됩니다. </p>
<p>onprogress 로드 중</p>
<p>읽기에 성공하면 onload가 트리거됩니다. </p>
<p>성공 또는 실패에 관계없이 읽기가 완료된 후 onloadend가 트리거됩니다. </p>
<p> 연습 없이 말하는 것만으로는 충분하지 않습니다. 여기에서 약간의 실험을 해보겠습니다. <br><br></p>
<div class="msgheader">
<div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode5'));"><u>코드 복사</u></span></div>코드는 다음과 같습니다. 다음과 같습니다:</div>
<div class="msgborder" id="phpcode5">
<br> 나는 작은 실험이다 <br> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd"><br> <html xmlns="http://www.w3.org/1999/xhtml"><br> <head><br> <제목>< ;/title><br> <script src="../jquery-1.7.1.js" type="text/javascript"></script><br> <script type="text/javascript" "><br> $(document).ready(function () {<br> var bt = $('#wl');<br> var file = $('#file');<br> var type = $('#type');<br> var result = $('#result');<br> <br> var func = {};<br> func.readAsDataURL = 함수(파일) {<br> //이미지인지 확인<br> if (!/image/w /.test(file.type)) {<br> Alert('비이미지 형식');<br> return false;<br> }<br> var reader = new FileReader();<br> reader.readAsDataURL(file);<br> reader.onload = function (e) {<br> result.html('<img src="' this .result ' "/>');<br> }<br> }<br> <br> func.readAsBinaryString = 함수(파일) {<br> <br> var reader = new FileReader();<br> reader.readAsBinaryString(파일);<br> reader.onload = 함수(e) {<br> result.html(this.result);<br> }<br> }<br> <br> func.readAsText = 함수 (파일) {<br> <br> var reader = new FileReader();<br> reader.readAsText(file);<br> reader.onload = 함수 (e) {<br> result.html(this.result );<br> }<br> }<br> <br> bt.click(function () {<br> if (func[type.val()] && typeof func[type.val()] == ' function') {<br> func[type.val()](file[0].files[0]);<br> }<br> });<br> <br> });<br> < ;/script> ;<br> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script>
</head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><br> <body><br> <div id="result"><br> </div><br> <input type="file " id= "file" multiple /><br> <select id="type"><br> <option value="readAsDataURL">readAsDataURL</option><br> <option value=" readAsBinaryString"> ;readAsBinaryString</option><br> <option value="readAsText">readAsText</option><br> </select><br> <button id="wl"><br> 파일 읽기</button><br> <br> </body><br> </html><br> </div>
<br>
<p>최신 브라우저를 사용해 보세요! </p>
<p>다시 판단하여 이벤트 실행 순서를 살펴보겠습니다. </p>
<p> reader.onload = 기능 (e) {<br> 경고('진행 중');<br> ~ reader.onerror = reader.onloadstart = 기능 (e) {<br> Alert('onloadstart'); > ~
<br><br>특정 애플리케이션: <br><br><br><br>
<br><br><br><br><br></p>코드 복사<p><strong><br>코드는 다음과 같습니다.<img alt="" src="http://files.jb51.net/file_images/article/201304/2013042415535526.jpg"><div class="msgborder" id="phpcode6">
<br> 简单图片上传 <br> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br> <html xmlns="http://www.w3.org/1999/xhtml"><br> <head><br> <title>
드래그 사실 API를 넣기 전에 jquery를 사용하여 드래그 앤 드롭 플러그인도 작성했습니다. .
직장에서 만난 것들 [팝업창] [드래그 앤 드롭] [비동기 파일 업로드]
하지만 HTML5 통합이 확실히 더 좋습니다! ! ! 이제 이 내용을 살펴보겠습니다. . . 그리고 그 힘은 단지 브라우저에서만 드래그하는 것이 아닙니다. 정말 놀랍습니다(업로드하려면 이미지를 드래그하세요)
HTML5에서는 기본적으로 이미지와 링크를 드래그 앤 드롭할 수 있습니다. 드래그 앤 드롭을 하려면 다른 요소를 draggable="true"로 설정해야 합니다. 바로 시도해 보겠습니다.
拖放的例子
<제목>< /title>
请拖放 < ;/html>
拖放时候一定要记住, 阻止页side默认行为，否则会打开new窗口的，其中以下亦是认点：
1 拖放可使用 DataTransfer는 递数据, 该对象是不常有用, 因为在拖动目标标时, 可能会经过其它遠素, 我们可以用此传递信息;
API：
드래그 스타트 被拖放元素 开始拖放时
드래그 被拖放元素 拖放过程中
드래그오버 拖放过程中鼠标经过的元素 本元素内移动
dragleave 拖放过程中鼠标经过的元素 离开本元素
드롭 拖放적目标원素 拖动적원素放到了本원素中
dragend 拖放的对象 拖放结束
저희 회사에는 많은 정보가 있습니다.习时的对研究对象。
结语
html5의 문서에 대한 내용은 다음과 같습니다.是还是感觉很厉害的样子!
|
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
