javascript html5 mobile terminal easy file upload

PC side upload files mostly with plug-ins, flash does not matter, but if the mobile end is still using a variety of redundant plug-ins estimated to be blown to death, the project inside the need to do the picture upload function, since H5 has the relevant interface and good compatibility, of course, the priority is to use H5 to achieve.

The main techniques used are:

ajax FileReader FormData

HTML structure:

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

upload is already packaged.js relies on 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 = {
 // Select the file, get the file size, you can also get the file format here, limit the user to upload the file format is not required 
 "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();
 },
 // Asynchronous file upload 
 uploadFile: function() {
 var fd = new FormData();// Create the 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 images before uploading, or by other methods txt
 }
 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);
 },
 // The file preview 
 previewImage: function(file) {
 var gallery = doms.thumb;
 var img = document.createElement("img");
 img.file = file;
 doms.thumb.html(img);
 //  use FileReader Method to display 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);

Call the method:

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

PHP parts:

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

For more exciting content, please refer to "ajax Upload Technology Summary", "javascript File Upload Operation Summary" and "jQuery Upload Operation Summary" for learning.

I hope this article is helpful to everyone's study.