Heim > Artikel > Web-Frontend > So implementieren Sie die Funktion zum Ziehen und Hochladen von Dateien in HTML5 + PHP
[Einführung] In diesem Artikel wird die Funktion zum Implementieren des Datei-Uploads in HTML5 vorgestellt. Bedürftige Schüler können sich darauf beziehen. Ich verweise auf eine ausländische Fotoalbum-Website. Es gibt nicht viele Änderungen. Ich habe nur die Vogellieder ins Chinesische umgewandelt. Der Grund, warum ich diesen ausgewählt habe, wird in diesem Artikel vorgestellt Die Details zur Einführung in die Funktion des Datei-Uploads in HTML5 können hier nachgelesen werden.
Für den Schnittstellenstil habe ich auf eine ausländische Fotoalbum-Website verwiesen. Die Änderungen waren nicht groß, ich habe nur die Vogelgesänge in Chinesisch konvertiert und auch den Upload-Stil geändert Der Grund, warum ich mich dafür entschieden habe, ist, dass es für mich einfach ist, Bilder hinzuzufügen: Eine ist das Hochladen per Drag & Drop, die andere ist das Hinzufügen von Netzwerkbildern. Es integriert geschickt drei Upload-Modi und Sie können es mit dem IE-Browser durchsuchen. Wenn HTML5 nicht unterstützt wird, gibt es keine Aufforderung zum Hochladen von Bildern per Drag & Drop, wie im Bild gezeigt:
Der wichtigste Teil des Drag-and-Drop-Uploads ist der js-Teil des Codes, der 70 % der Funktionen implementiert. Die anderen 30 % dienen lediglich dazu, die Bildinformationen an den Hintergrund zu senden und dann auszuführen entsprechende Verarbeitung, wie Komprimierung und Zuschneiden So viel. Schauen wir uns also zunächst den js-Implementierungscode an.
代码如下 | 复制代码 |
<script><br/>$().ready(function() {<br/> if($.browser.safari || $.browser.mozilla). '#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('So implementieren Sie die Funktion zum Ziehen und Hochladen von Dateien in 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 geladen = 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 .kompatible').hide() ;<br/> $('#dtb-msg1 .notefficient').show();<br/> }<br/>});<br/></script>
|
test.php-Datei
代码如下 | 复制代码 |
$r = new stdClass( ); |
Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Funktion zum Ziehen und Hochladen von Dateien in HTML5 + PHP. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!