html5代码文件咋写入,移动端HTML5实现文件上传功能【附代码】

一团网资讯

一团资讯 > html5 > 移动端HTML5实现文件上传功能【附代码】

移动端HTML5实现文件上传功能【附代码】

2018-04-10 15:38:32     发布者：来源网络

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

用的技术主要是：

ajax

FileReader

FormData

HTML结构：

JavaScript 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 

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 

var file = files[index];

fd.append(opts.file, file);

funs.previewImage(file);

}

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

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'])) {

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."rn";

file_put_contents('log.log', $log,FILE_APPEND);

}

?>

点击这里下载源码