[소개] html5에서 파일 업로드를 구현하는 기능을 소개하는 글입니다. 필요한 학생들이 참고하시면 됩니다. 인터페이스 스타일은 외국 사진첩 사이트를 참고했는데, 업로드할 때 새소리만 중국어로 바꾸고 스타일을 바꿨어요.
이번 글에서는 자세한 내용은 HTML5의 파일 업로드 기능에 대한 소개입니다. 필요한 학생들이 참고할 수 있습니다.
인터페이스 스타일은 외국 사진첩 사이트를 참고해서 변경사항은 크지 않았는데 그냥 새소리만 중국어로 변환하고 업로드 스타일도 바꿨습니다. 이것을 선택한 이유는 확장이 쉽기 때문입니다. 사진을 추가하는 방법은 드래그 앤 드롭 업로드, 파일 업로드 일반 선택, 네트워크 사진 추가 등 3가지가 있습니다. 세 가지 업로드 모드를 교묘하게 통합하고 있으며, HTML5를 지원하지 않는 경우 그림과 같이 드래그 앤 드롭하여 이미지를 업로드하라는 메시지가 표시되지 않습니다.
드래그 앤 드롭 업로드에서 가장 중요한 부분은 코드의 js 부분으로, 이는 70%의 기능을 구현하고 나머지 30%는 단지 이미지 정보를 백그라운드에 제출한 후 수행하는 것입니다. 압축 및 자르기와 같은 해당 처리가 너무 많습니다. 그럼 먼저 js 구현 코드를 살펴보겠습니다.
| 代码如下 | 复代码 |
|
<script><br/>$().ready(function() {<br/> if($.browser.safari || $.browser.mozilla){<br/> $('#dtb-msg1 . Compatible').show();<br/> $('#dtb-msg1 .not Compatible').hide();<br/> $( '#drop_zone_home').hover(function(){<br/> $(this).children('p').stop().animate({top:'0px'},200);<br/> },function (){<br/> $(this).children('p').stop().animate({top:'-44px'},200);<br/> });<br/> //功能实现<br/> $(document).on({<br/> dragleave:function(e){<br/> e.preventDefault();<br/> $('.dashboard_target_box').removeClass('over');<br/> },<br/> drop:function(e){<br/> e.preventDefault();<br/> //$('.dashboard_target_box').removeClass('over');<br/> },<br/> dragenter :function(e){<br/> e.preventDefault();<br/> $('.dashboard_target_box').addClass('over');<br/> },<br/> dragover:function(e){<br/> e.preventDefault();<br/> $('.dashboard_target_box').addClass('over');<br/> }<br/> });<br/> var box = document.getElementById('target_box'); <br/> box.addEventListener("drop",function(e){<br/> e.preventDefault();<br/> //获取文件列表<br/> var fileList = e.dataTransfer.files;<br/> var img = document.createElement('img');<br/> //检测是否是拖拽文件到页면적작작<br/> if(fileList.length == 0){<br/> $('.dashboard_target_box').removeClass ('over');<br/> return;<br/> }<br/> //检测文件是不是图文<br/> if(fileList[0].type.indexOf('html5+php에서 파일 드래그 및 업로드 기능을 구현하는 방법') === -1){ <br/> $('.dashboard_target_box').removeClass('over');<br/> return;<br/> }<br/> <br/> if($.browser.safari){<br/> //Chrome8+<br/> img.src = window.webkitURL.createObjectURL(fileList[0]);<br/> }else if($.browser.mozilla){<br/> //FF4<br/> img.src = window.URL.createObjectURL( fileList[0]);<br/> }else{<br/> //实例化file reader对象<br/> var reader = new FileReader();<br/> reader.onload = function(e){<br/> img. src = this.result;<br/> $(document.body).appendChild(img);<br/> }<br/> reader.readAsDataURL(fileList[0]);<br/> }<br/> var xhr = new XMLHttpRequest ();<br/> xhr.open("post", "test.php", true);<br/> xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");<br/> xhr.upload. addEventListener("progress", function(e){<br/> $("#dtb-msg3").hide();<br/> $("#dtb-msg4 스팬").show();<br/> $("#dtb-msg4").children('span').eq(1).css({너비:'0px'}) ;<br/> $('.show').html('');<br/> if(e.lengthComputable){<br/> var added = Math.ceil((e.loaded / e.total) * 100) ;<br/> $("#dtb-msg4").children('span').eq(1).css({width:(loaded*2)+'px'});<br/> }<br/> }, false);<br/> xhr.addEventListener("load", function(e){<br/> $('.dashboard_target_box').removeClass('over');<br/> $("#dtb-msg3" ).show();<br/> $("#dtb-msg4span").hide();<br/> var result = jQuery.parseJSON(e.target.responseText);<br/> alert(result.filename) ;<br/> $('.show').append(result.img);<br/> }, false);<br/> <br/> var fd = new FormData();<br/> fd.append('xfile ', fileList[0]);<br/> xhr.send(fd);<br/> },false);<br/> }else{<br/> $('#dtb-msg1 . Compatible').hide() ;<br/> $('#dtb-msg1 .not Compatible').show();<br/> }<br/>});<br/></script>
| |
test.php 파일
| 代码如下 | 复代码 |
$r = new stdClass( ); | |
위 내용은 html5+php에서 파일 드래그 및 업로드 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
