PC端上 传文件 多 半 用插件，引入flash都没关系，但是移动端要是还用各种冗余的插件估计得被喷死，项目里面需要做图片上传的功能，既然H5已经有相关的接口且兼容性良好，当然优先考虑用H5来实现。
用的技 术 主要是：
ajax
FileReader
FormData
HT ML 结构：
JavaScript Code 复制内容到剪贴板
<div&nbs p; class = "c am era-area" > <form encty PE = " ;m ultipart/form-data" method= "post" > <input type= "file" name= "fileToUpload" class = "fileToUpload" accept= "image/*" capture= "camera" /> <div class = "upload- PR ogress" ><span></span></div> </form> <div class = "thumb" ></div> </div>
已经封装好的upload.js，依赖zepto
JavaScript Code 复制内容到剪贴板
( 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.uploa DF ile(); }, //异步上传文件 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.p rev iewImage(file); //上传前 预览图 片，也可以通过其他方法预览txt } var x hr = new XM LHttpRequest(); xhr.upload.addEventListener( "progress" , funs.uploadProgress, false ); //监听上传 进度 xhr.addEventListener( "load" , funs.upload complete , false ); xhr.addEventListener( "error" , opts.uploadF ai led, 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.t arg et.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);
调用方法：
JavaScript Code 复制内容到剪贴板
$( ".camera-area" ).fileUpload({ "url" : "savetofile.php" , "file" : "myFile" });
PHP部分：
PHP Code 复制内容到剪贴板
<?php if (isset( $_FILES [ 'myFile' ])) { // Example: wr IT e LOG ( $_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); } ?>
点击这里下载源码
以上这篇移动端HTML5实现文件 上传功能 【附代码】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
原文地址： http://www.cnblogs.com/hutuzhu/p/5254532.html
总结
以上是 为你收集整理的 移动端HTML5实现文件上传功能【附代码】 全部内容，希望文章能够帮你解决 移动端HTML5实现文件上传功能【附代码】 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于移动端HTML5实现文件上传功能【附代码】的详细内容...