[导读] 本文章介绍了关于在html5中实现文件上传的功能介绍,有需要的同学可以参考一下下哈。 界面样式我是参考了一个国外的相册网站,改动不大,只是把鸟语转换成中文,以及上传时的样式也进行了改动,之所以选这个
本文章介绍了关于在html5中实现文件上传的功能介绍,有需要的同学可以参考一下下哈。
界面样式我是参考了一个国外的相册网站,改动不大,只是把鸟语转换成中文,以及上传时的样式也进行了改动,之所以选这个的原因就是,我很容易做扩展,它支持3种方式添加图片,一种拖拽上传,一种常规的选择文件上传,另外的就是添加网络图片。它很巧妙的把三种上传模式整合到了一起,而且你可以用IE浏览器浏览下,如果不支持HTML5,是没有拖拽上传图片的提示的,如图:
拖拽上传最重要的就是js部分的代码,它实现了70%的功能,另外30%仅仅是把图片信息提交到后台,然后做对应的处理,比如压缩啊,裁剪啊云云。所以先来看下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('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文件
代码如下 | 复制代码 |
$r = new stdClass(); |
以上是 html5+php如何实现文件拖动上传功能的详细内容。更多信息请关注PHP中文网其他相关文章!