《javascript html5移动端轻松实现文件上传_.docx》由会员分享，可在线阅读，更多相关《javascript html5移动端轻松实现文件上传_.docx（7页珍藏版）》请在三一文库上搜索。
1、javascript html5移动端轻松实现文件上传_ 这篇文章主要介绍了javascript html5移动端轻松实现文件上传的相关资料,需要的伴侣可以参考下 PC端上传文件多半用插件，引入flash都没关系，但是移动端要是还用各种冗余的插件估量得被喷死，项目里面需要做图片上传的功能，既然H5已经有相关的接口且兼容性良好，当然优先考虑用H5来实现。 用的技术主要是： ajax FileReader FormData HTML结构： div class=camera-area form enctype=multipart/form-data method=post input type=fi
2、le name=fileToUpload class=fileToUpload accept=image/* capture=camera/ div class=upload-progressspan/span/div /form div class=thumb/div /div 已经封装好的upload.js，依靠zepto (function($) $.extend($.fn, fileUpload: function(opts) this.each(function() var $self = $(this); var doms = fileToUpload: $self.find(.f
3、ileToUpload), 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 = filesindex; var fileSiz
4、e = 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.fileToU
5、pload)0.files; var count = files.length; for (var index = 0; index count; index+) var file = filesindex; fd.append(opts.file, file);/将文件添加到表单数据中 funs.previewImage(file);/上传前预览图片，也可以通过其他方法预览txt var xhr = new XMLHttpRequest(); xhr.upload.addEventListener(progress, funs.uploadProgress, false);/监听上传进度 x
6、hr.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); / 用法FileR
7、eader方法显示图片内容 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.ht
8、ml(percentComplete.toString() + %); , uploadComplete: function(evt) alert(evt.target.responseText) ; doms.fileToUpload.on(change, function() doms.progress.find(span).width(0); funs.fileSelected(); ); ); ); )(Zepto); 调用方法： $(.camera-area).fileUpload( url: savetofile.php, file: myFile ); PHP部分： ?php i
9、f (isset($_FILESmyFile) / Example: writeLog($_FILES); move_uploaded_file($_FILESmyFiletmp_name, uploads/ . $_FILESmyFilename); echo successful; function writeLog($log) if(is_array($log) | is_object($log) $log = json_encode($log); $log = $log.rn; file_put_contents(log.log, $log,FILE_APPEND); ? 盼望本文所述对大家学习有所关心。 .