移动端通过HTML5实现文件上传功能

来源：九五美食网

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

用的技术主要是：

ajax
FileReader
FormData

HTML结构：

<p class="camera-area"> 
 <form enctype="multipart/form-data" method="post"> 
 <input type="file" name="fileToUpload" class="fileToUpload" accept="image/*" capture="camera"/> 
 <p class="upload-progress"><span></span></p> 
 </form> 
 <p class="thumb"></p> 
 </p>

已经封装好的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'; 
 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);

调用方法：

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

PHP部分：

<?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); 
} 
?>

php中文件上传图片

JavaScript进阶(九)JS实现本地文件上传至阿里云服务器

HTML5应用之文件上传的详细介绍

显示全文

全部频道

移动端通过HTML5实现文件上传功能