javascript html5移动端轻松实现文件上传

PC端上传文件多半用插件，引入flash都没关系，但是移动端要是还用各种冗余的插件估计得被喷死，项目里面需要做图片上传的功能，既然H5已经有相关的接口且兼容性良好，当然优先考虑用H5来实现。
用的技术主要是：

ajax
FileReader
FormData

HTML结构：

<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

（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"; elsefileSize = （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）;

调用方法：

$（".camera-area"）.fileUpload（{"url": "savetofile.php","file": "myFile" }）;

PHP部分：

<?phpif （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."
";file_put_contents（"log.log", $log,FILE_APPEND）;}?>

希望本文所述对大家学习有所帮助。