Javascript html5 mobile terminals can easily upload files, and html5 can easily implement

Javascript html5 mobile terminals can easily upload files, and html5 can easily implement

Most of the files uploaded on the PC end are plug-ins, and it does not matter if flash is introduced. However, if the Mobile End still uses a variety of redundant plug-ins, it is estimated that they will be sprayed to death. The project requires the image upload function, since H5 already has related interfaces and is compatible with each other, H5 is preferred.

The main technologies 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>

The encapsulated upload. js depends 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 a file to obtain the file size. You can also obtain 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 & gt; 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 () ;}, // asynchronously upload the file 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 the image before upload. You can also preview the image by using other methods. txt} var xhr = new XMLHttpRequest (); xhr. upload. addEventListener ("progress", funs. uploadProgress, false); // listens to the 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.tar get. 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.tar get. responseText) }}; doms. fileToUpload. on ("change", function () {doms. progress. find ("span "). width ("0"); funs. fileSelected () ;}) ;}}) ;}) (Zepto );

Call method:

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

PHP section:

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

I hope this article will help you learn more.

Articles you may be interested in:

• How to obtain the URL uploaded by this file in multiple forms to implement js Code
• Servlet + Jsp Implementation of the image or file upload function specific ideas and code
• An example of a simple jQuery plug-in ajaxfileupload. js to implement ajax File Upload
• Nodejs + express + html5 implement drag-and-drop upload
• The ajaxFileUpload. js plug-in supports Multifile upload.
• Asynchronous Multifile upload using native JavaScript
• Javascript HTML5 Ajax implements the File Upload progress bar Function