JavaScript HTML5 mobile End Easy File Upload _javascript tips

PC-side upload files mostly with Plug-ins, the introduction of Flash is okay, but the mobile end if the use of a variety of redundant plug-ins estimated to be sprayed dead, the project needs to do the image upload function, since the H5 has a relevant interface and good compatibility, of course, the priority is to use H5 to achieve.

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>

Already encapsulated good upload.js, dependent 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 file, get file size, can also get file format here, restrict user upload file "fileselected" not required format: function () {var files = (doms.file
      Toupload) [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)/(1024 * 1024)). ToString () + ' MB ';
      else FileSize = (Math.Round (file.size * 100/1024)/MB). toString () + ' KB ';
     } funs.uploadfile (); /////asynchronous Upload file Uploadfile:function () {var fd = new FormData ();//Create form data object var files = (Doms.filetouplo
      AD) [0].files;
      var count = files.length; FoR (var index = 0; index < count; index++) {var file = Files[index]; Fd.append (opts.file, file)//Add file to form data funs.previewimage (file), preview picture before uploading, or preview txt} var xhr = n by other means
      EW 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 (files) {var gallery = Doms.thumb;
      var img = document.createelement ("img");
      Img.file = file;
      Doms.thumb.html (IMG);
      Display picture content using the FileReader method 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 Method:

$ (". Camera-area"). FileUpload ({
    "url": "savetofile.php",
    "file": "MyFile"
   });

PHP section:

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

I hope this article will help you to learn.