说到文件上传,其实我很快就能想到type=file的input标签,不过不知道后台要怎么接收,不过还好,在php中接收文件是很简单的事情。
看个例子,当然涉及到两部分,前端的web.php和后台接收的upload.php
upload.php:
<?php if(isset($_FILES['pic'])) { if(is_uploaded_file($_FILES['pic']['tmp_name'])) { if($_FILES['pic']['size'] < 1000000) { //不能超过1M move_uploaded_file($_FILES["pic"]["tmp_name"], dirname ( __FILE__ ) . "/upload/" . $_FILES['pic']['name']); echo "success"; } else { echo "file too large"; } } else { echo "error"; } } else { echo "error, check php.ini"; } ?>
web.php:
<!DOCTYPE html> <head> <meta charset=utf-8 /> <title>文件上传</title> </head> <body> <form action="upload.php" method="post" enctype="multipart/form-data"> 上传:<input type="file" name="pic" /> <input type="submit" value="上传" /> </form> </body>check the result
这段代码解释一下:在web.php中,使用form提交,上传文件,一定要加上enctype="multipart/form-data",这样一句。这样文件信息就到了$_FILES里面,即使你后台什么都不写,文件会自动保存在$_FILES['pic']['tmp_name']路径下面,我们用is_uploaded_file可以判断文件是否是上传上来的,如果是的话,通过move_uploaded_file将它移动到我们需要的地方就行了,在upload.php中,我还做了一个文件大小检查。
php文件上传就是这么简单,但是有时候你还是会发现一些异常,特别是大文件,原因可能是在php.ini文件中,有两个配置项,upload_max_filesize表示能够上传的最大文件大小,post_max_size 表示post请求的最大限制,这两个都会限制文件大小。至于php.ini在哪里,你到wamp安装目录搜一下php.ini就能找到啦。
但是这样的效果不能满足我们的要求,为什么呢?因为没有进度,这是要命的极差用户体验,不能忍。来看看进度怎么搞,这就要用到ajax技术了,不过带进度的功能只有在比较高级的浏览器才能看到哦!
web.php:
<!DOCTYPE html> <head> <meta charset=utf-8 /> <title>文件上传</title> </head> <body> <input type="file" name="pic" id="uploadFile" /> <div id="progress"></div> <script> document.getElementById('uploadFile').onchange = function() { var fd = new FormData(); fd.append(this.name, this.files[0]); var xhr = new XMLHttpRequest(); xhr.open('POST', '../case01/upload.php', true); xhr.upload.onprogress = function (ev) { percent = 100 * ev.loaded / ev.total; document.getElementById('progress').innerHTML = percent + '%'; } xhr.send(fd); } </script> </body>check the result
ajax上传文件就没必要form表单了,也没必要点击上传了,我们监听input的onchange方法,这样我们选完文件就直接上传了。var fd = new FormData();和fd.append(this.name, this.files[0]);是封装了一个FormData对象,最后就是把这个对象通过post方式发送出去。与之前的ajax不同,这次我们监听xhr.upload.onprogress,这就是进度所在,进度在参数中,percent = 100 * ev.loaded / ev.total;就能计算出百分比。
文件上传是非常常用而又非常重要的,老版本的浏览器要实现进度是很麻烦的,而新版本的浏览器却很方便。