手机上传html5插件,依赖zepto 做的html5移动端文件上传uploader plus 插件

html结构

封装的upload类，依赖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)

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(thinkphp)

public function upload_images_select(){

header('Content-type: application/json'); //json

$upload = new \Think\Upload();// 实例化上传类

$upload->rootPath = C('rootPath');

$upload->maxSize = 3145728 ;// 设置附件上传大小

$upload->exts = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型

$upload->savePath = './images/Member/Evaluate/'; // 设置附件上传目录 // 上传文件

$info = $upload->upload();

if(!$info) {

// 上传错误提示错误信息

$this->error($upload->getError());

}else{

// 上传成功

$this->ajaxReturn(array('status'=>1,'item'=>$info));

}

}

注：thinkphp 多图片上传出现的bug详见上一篇文章；