javascript html5移动端轻松实现文件上传
PC端上传文件多半用插件，引入flash都没关系，但是移动端要是还用各种冗余的插件估计得被喷死，项目里面需要做图片上传的功能，既然H5已经有相关的接口且兼容性良好，当然优先考虑用H5来实现。
用的技术主要是：
- ajax
- FileReader
- FormData
HTML结构：
<divclass="camera-area"> <formenctype="multipart/form-data"method="post"> <inputtype="file"name="fileToUpload"class="fileToUpload"accept="image/*"capture="camera"/> <divclass="upload-progress"><span></span></div> </form> <divclass="thumb"></div> </div>
已经封装好的upload.js，依赖zepto
(function($){
$.extend($.fn,{
fileUpload:function(opts){
this.each(function(){
var$self=$(this);
vardoms={
"fileToUpload":$self.find(".fileToUpload"),
"thumb":$self.find(".thumb"),
"progress":$self.find(".upload-progress")
};
varfuns={
//选择文件，获取文件大小，也可以在这里获取文件格式，限制用户上传非要求格式的文件
"fileSelected":function(){
varfiles=(doms.fileToUpload)[0].files;
varcount=files.length;
for(varindex=0;index<count;index++){
varfile=files[index];
varfileSize=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(){
varfd=newFormData();//创建表单数据对象
varfiles=(doms.fileToUpload)[0].files;
varcount=files.length;
for(varindex=0;index<count;index++){
varfile=files[index];
fd.append(opts.file,file);//将文件添加到表单数据中
funs.previewImage(file);//上传前预览图片，也可以通过其他方法预览txt
}
varxhr=newXMLHttpRequest();
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){
vargallery=doms.thumb;
varimg=document.createElement("img");
img.file=file;
doms.thumb.html(img);
//使用FileReader方法显示图片内容
varreader=newFileReader();
reader.onload=(function(aImg){
returnfunction(e){
aImg.src=e.target.result;
};
})(img);
reader.readAsDataURL(file);
},
uploadProgress:function(evt){
if(evt.lengthComputable){
varpercentComplete=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';
}
functionwriteLog($log){
if(is_array($log)||is_object($log)){
$log=json_encode($log);
}
$log=$log."\r\n";
file_put_contents('log.log',$log,FILE_APPEND);
}
?>
更多精彩内容请参考专题《ajax上传技术汇总》，《javascript文件上传操作汇总》和《jQuery上传操作汇总》进行学习。
希望本文所述对大家学习有所帮助。