Mobile terminal HTML5 realizes file upload_HTML/Xhtml_Web page production-HTML Tutorial-php.cn

Mobile terminal HTML5 realizes file upload_HTML/Xhtml_Web page production

WBOY

Release： 2016-05-16 16:36:06

Original

1328 people have browsed it

Most files uploaded on the PC side use plug-ins. It doesn’t matter if you introduce flash. However, if the mobile side still uses various redundant plug-ins, it will probably be sprayed to death. The project needs to have the function of uploading images, since H5 already has relevant interfaces. And the compatibility is good, of course, priority is given to using H5 for implementation.

The main technologies used are:

ajax

FileReader

FormData

HTML structure:

XML/HTML CodeCopy content to clipboard

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

The packaged upload.js depends on zepto

JavaScript CodeCopy content to clipboard

(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();
},
//Upload files asynchronously
uploadFile: function() {
var fd = new FormData();//Create form data object
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);//Add the file to the form data
funs.previewImage(file);//Preview the image before uploading, or preview the txt through other methods
var xhr = new XMLHttpRequest();
"progress", funs.uploadProgress, false); // Monitor upload progress
"load", funs.uploadComplete, false);
"error", opts.uploadFailed, false);
"POST", opts.url);
//File preview
previewImage: function(file) {
var gallery = doms.thumb;
var img = document.createElement("img");
img.file = file;
doms.thumb.html(img);
//Use the FileReader method to display the image content
var reader = new FileReader();
reader.onload = (function(aImg) {
return function(e) {
aImg.src = e.target.result;
function(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
'%');
},
: function(evt) { alert(evt.target.responseText)
doms.fileToUpload.on("change", function() {
doms.progress.find("span").width("0");
funs.fileSelected();
});
});
}
});
})(Zepto);

Calling method:

JavaScript CodeCopy content to clipboard

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

PHP part:

PHP CodeCopy content to clipboard

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."rn";
file_put_contents('log.log', $log,FILE_APPEND);
}
?>