File upload via HTML5 on mobile

Most of the time, plug-ins are used to upload files on the PC, and it doesn't matter if flash is introduced. However, if various redundant plug-ins are still used on the mobile terminal, you will probably be criticized to death. The project needs to have the function of uploading pictures. Since H5 already has related interfaces and good compatibility, of course H5 is given priority to implement it.

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 = {
//Select a file and get the file size. You can also get the file format here to restrict users from uploading files in non-required formats.
"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 a 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, you can also preview the txt file by other methods
}
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener( "progress" , funs.uploadProgress, false ); //Monitor upload progress
xhr.addEventListener( "load" , funs.uploadComplete, false );
xhr.addEventListener( "error" , opts.uploadFailed, false );
xhr.open( "POST" , opts.url);
xhr.send(fd);
},
//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;
};
})(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);

Calling method:

JavaScript CodeCopy content to clipboard

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

PHP part:

PHP CodeCopy content to clipboard

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