[导读] 本文章介绍了关于在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(); | |