前端开发之旅- 移动端HTML5实现文件上传
一、
在一个客户的webapp项目中需要用到 html5调用手机摄像头,找了很多资料,大都是 js调用api 然后怎样怎样,做了几个demo测试发现根本不行, 后来恍然大悟,用html5自带的 input file="" ,纯html5,并且不涉及到js ,就可以实现。代码如下:
1 2 3 | < input type="file" accept="image/*" capture="camera"> < input type="file" accept="video/*" capture="camcorder"> < input type="file" accept="audio/*" capture="microphone"> |
capture表示,可以捕获到系统默认的设备,比如:camera--照相机;camcorder--摄像机;microphone--录音。
accept表示,直接打开系统文件目录。
其实html5的input:file标签还支持一个multiple属性,表示可以支持多选,如:
1 | < input type="file" accept="image/*" multiple> |
加上这个multiple后,capture就没啥用了,因为multiple是专门yong用来支持多选的。
二、
PC端上传文件多半用插件,引入flash都没关系,但是移动端要是还用各种冗余的插件估计得被喷死,项目里面需要做图片上传的功能,既然H5已经有相关的接口且兼容性良好,当然优先考虑用H5来实现。
用的技术主要是:
HTML结构:
1 2 3 4 5 6 7 | < div class="camera-area"> < form enctype="multipart/form-data" method="post"> < input type="file" name="fileToUpload" class="fileToUpload" accept="image/*" capture="camera"/> < div class="upload-progress">< span ></ span ></ div > </ form > < div class="thumb"></ div > </ div > |
已经封装好的upload.js,依赖zepto
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | (function($) { $.extend($.fn, { fileUpload: function(opts) { this.each(function() { var $self = $(this); var doms = { "fileToUpload": $self.find(".fileToUpload"), "thumb": $self.find(".thumb"), "progress": $self.find(".upload-progress") }; var funs = { //选择文件,获取文件大小,也可以在这里获取文件格式,限制用户上传非要求格式的文件 "fileSelected": function() { var files = (doms.fileToUpload)[0].files; var count = files.length; for (var index = 0; index < count ; index++) { var file = files[index]; var fileSize = 0; if (file.size > 1024 * 1024) fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB'; else fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB'; } funs.uploadFile(); }, //异步上传文件 uploadFile: function() { var fd = new FormData();//创建表单数据对象 var files = (doms.fileToUpload)[0].files; var count = files.length; for (var index = 0; index < count; index++) { var file = files[index]; fd.append(opts.file, file);//将文件添加到表单数据中 funs.previewImage(file);//上传前预览图片,也可以通过其他方法预览txt } var xhr = new XMLHttpRequest(); xhr.upload.addEventListener("progress", funs.uploadProgress, false);//监听上传进度 xhr.addEventListener("load", funs.uploadComplete, false); xhr.addEventListener("error", opts.uploadFailed, false); xhr.open("POST", opts.url); xhr.send(fd); }, //文件预览 previewImage: function(file) { var gallery = doms.thumb; var img = document.createElement("img"); img.file = file; doms.thumb.html(img); // 使用FileReader方法显示图片内容 var reader = new FileReader(); reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img); reader.readAsDataURL(file); }, uploadProgress: function(evt) { if (evt.lengthComputable) { var percentComplete = Math.round(evt.loaded * 100 / evt.total); doms.progress.html(percentComplete.toString() + '%'); } }, "uploadComplete": function(evt) { alert(evt.target.responseText) } }; doms.fileToUpload.on("change", function() { doms.progress.find("span").width("0"); funs.fileSelected(); }); }); } }); })(Zepto); |
调用方法:
1 2 3 4 | $( ".camera-area" ).fileUpload({ "url" : "savetofile.php" , "file" : "myFile" }); |
PHP部分:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <?php if (isset($_FILES[ 'myFile' ])) { // Example: writeLog($_FILES); move_uploaded_file($_FILES[ 'myFile' ][ 'tmp_name' ], "uploads/" . $_FILES[ 'myFile' ][ 'name' ]); echo 'successful' ; } function writeLog($log){ if (is_array($log) || is_object($log)){ $log = json_encode($log); } $log = $log. "\r\n" ; file_put_contents( 'log.log' , $log,FILE_APPEND); } ?> |
源码:https://git.oschina.net/sirius_swu/videoupload.git
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步