Maison > Article > interface Web > Comment implémenter la fonction glisser et télécharger des fichiers en html5 php
[Introduction] Cet article présente la fonction d'implémentation du téléchargement de fichiers en html5. Les étudiants dans le besoin peuvent s'y référer. Je fais référence à un site Web d'album photo étranger pour le style de l'interface. Il n'y a pas beaucoup de changements. Je convertis simplement les chants d'oiseaux en chinois et le style de téléchargement est également modifié. La raison pour laquelle j'ai choisi ceci
Cet article présente. les détails sur Ceci est une introduction à la fonction de téléchargement de fichiers en HTML5. Les étudiants dans le besoin peuvent s'y référer.
Pour le style de l'interface, j'ai fait référence à un site Web d'album photo étranger. Les changements n'étaient pas importants, j'ai juste converti les chants d'oiseaux en chinois et le style de téléchargement a également été modifié. La raison pour laquelle j'ai choisi ceci est qu'il est facile pour moi de développer. Il prend en charge 3 façons d'ajouter des Comment implémenter la fonction glisser et télécharger des fichiers en html5 phps, l'une est le téléchargement par glisser-déposer, l'autre est la sélection régulière du téléchargement de fichiers et l'autre consiste à ajouter des Comment implémenter la fonction glisser et télécharger des fichiers en html5 phps réseau. Il intègre intelligemment trois modes de téléchargement et vous pouvez le parcourir avec le navigateur IE. S'il ne prend pas en charge HTML5, il n'y a pas d'invite à glisser-déposer pour télécharger des Comment implémenter la fonction glisser et télécharger des fichiers en html5 phps, comme le montre l'Comment implémenter la fonction glisser et télécharger des fichiers en html5 php :
.
La partie la plus importante du téléchargement par glisser-déposer est la partie js du code, qui implémente 70 % des fonctions. Les 30 % restants consistent simplement à soumettre les informations de l'Comment implémenter la fonction glisser et télécharger des fichiers en html5 php en arrière-plan, puis à les exécuter. traitement correspondant, tel que la compression et le recadrage. Jetons donc d'abord un coup d'œil au code d'implémentation de js.
代码如下 | 复制代码 |
<script><br/>$().ready(function() {<br/> if($.browser.safari || $.browser.mozilla){<br/> $('#dtb-msg1 .compatible').show();<br/> $('#dtb-msg1 .notcompatible').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('Comment implémenter la fonction glisser et télécharger des fichiers en 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 span").show();<br/> $("#dtb-msg4").children('span').eq(1).css({width:'0px'}) ;<br/> $('.show').html('');<br/> if(e.lengthComputable){<br/> var chargé = 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-msg4 span").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 .notcompatible').show();<br/> }<br/>});<br/></script>
|
代码如下 | 复制代码 |
$r = new stdClass( ); |
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!