[Introduction] This article introduces the function of implementing file upload in html5. Students in need can refer to it. I refer to a foreign photo album website for the interface style. The changes are not big. I just converted the bird songs into Chinese and changed the style when uploading. The reason why I chose this
This article introduces the details about This is an introduction to the function of file upload in HTML5. Students in need can refer to it.
I refer to a foreign photo album website for the interface style. The changes are not big. I just converted the bird songs into Chinese and the upload style was also changed. The reason why I chose this is that it is easy for me to expand. It supports 3 ways to add pictures, one is drag and drop upload, one is regular selection of file upload, and the other is to add network pictures. It cleverly integrates three upload modes, and you can use IE browser to browse it. If it does not support HTML5, there is no prompt to drag and drop to upload images, as shown in the picture:
The most important part of drag-and-drop upload is the js part of the code, which implements 70% of the functions. The other 30% is just to submit the image information to the background and then perform corresponding processing, such as compression and cropping. So much. So let’s take a look at the js implementation code first.
| 代码如下 | 复制代码 |
|
<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('image') === -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 loaded = 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>
| |
test.php file
| 代码如下 | 复制代码 |
$r = new stdClass(); | |
The above is the detailed content of How to implement file drag and upload function in html5+php. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
