通过fromdata实现上传文件
2018-06-24 01:16:24来源:未知 阅读 ()
其实呢,文件上传的插件很多,可是现在做的东西要求尽量少用插件,所以就自己写了一下。
之前也用node写过对文件处理方面的东西,这次用php写着试一下。
a.html文件
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/html"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <html> <head> <title></title> </head> <body> <form enctype="multipart/form-data" id="uploadImg"> 上传文件: <input name="file" type="file" id="file"> </form> </body> </html> <script src="jquery.js"></script> <script> $(function(){ $('input[type="file"]').on('change', function(){ var file = this.files[0]; var formData = new FormData($('#uploadImg')[0]); formData.append('file', file); console.log(formData.get('file')) $.ajax({ url: 'b.php', type: 'POST', cache: false, data: formData, //dataType: 'json', //async: false, processData: false, contentType: false, }).done(function(res) { console.log(res) }).fail(function(res) { console.log(res) }); }); }) </script>
b.php文件:
<?php //print_r($_FILES); $uptypes=array( 'image/jpg', 'image/jpeg', 'image/png', 'image/pjpeg', 'image/gif', 'image/bmp', 'image/x-png' ); $max_file_size=200000000; //上传文件大小限制, 单位BYTE $file=$_FILES["file"]; $fileName=$file["name"]; $filetype = $file["type"]; $filesize = $file["size"]; if(!in_array($filetype, $uptypes)){ // 文件类型判断 echo "文件类型不符!"; exit; } if($filesize > $max_file_size){ // 文件大小判断 echo "文件太大!"; exit; } if (!is_dir("image/")) { //创建路径 mkdir("image/"); } $url = "image/"; //当文件存在 if (file_exists($url.$fileName)) { //echo $fileName." already exists."; echo $url.$fileName; }else{//当文件不存在 $url=$url.$fileName; move_uploaded_file($_FILES["file"]["tmp_name"],$url); echo $url; } ?>
在这当中也遇到了几个问题
1.在PHP中通过print_r($_FILES)打印时,有时候formData里面的参数type会为空,而在前端打印的formData.get('file')里是有type的值的,原因是PHP导入文件(我是导的图片)有大小限制
解决方法:在php.ini中,搜索upload_max_filesize(默认为2M),修改这个值,重启服务器即可。
2:在通过ajax进行数据请求时,console.log(formData)对象为空,而且在append后还是为空,是因为属性不是直接挂载在你这个FormData,可以通过get方法进行获取。
参考:https://segmentfault.com/q/1010000010087308
3:在一般情况下使用ajax请求,processData(默认为true)不需要设置,但是当使用fromdata上传文件时,发送的对象不需要转化为对象,所以必须设置为true。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
下一篇:jQuery代码优化的9种方法
- js防止表单重复提交实现代码 2020-03-29
- 基于JQuery的多标签实现代码 2020-03-29
- js实现翻页后保持checkbox选中状态的实现方法 2020-03-25
- NiftyCube实现圆角边框的方法 2020-03-20
- JS实现标签页切换效果 2020-03-12
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash