移动端HTML5实现文件上传_HTML/Xhtml_网页制作

移动端HTML5实现文件上传_HTML/Xhtml_网页制作

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

推荐度：

点击下载本文 文档为doc格式

XML/HTML Code复制内容到剪贴板


 
 
 
 
 
 
  
 
 
 
 
  
 
 
 
 
 

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



调用方法：
JavaScript Code复制内容到剪贴板


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



PHP部分：

PHP Code复制内容到剪贴板


 

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