Front-end Development tour-Mobile HTML5 for file upload

One

In a customer's WebApp project need to use the HTML5 call phone camera, find a lot of information, mostly JS call API and then how how, do a few demo test found at all, and then suddenly, with HTML5 input file= "", pure HTML5, And does not involve JS, it can be achieved. The code is as follows:

<input type= "File" accept= "image/*" capture= "Camera" ><input type= "file" accept= "video/*" capture= "camcorder "><input type=" file "accept=" audio/* "capture=" Microphone ">

Capture indicates that the system's default device can be captured, such as: camera--camera, camcorder--camera, microphone--recording.
Accept indicates that the system files directory is opened directly.

In fact HTML5 's input:file tag also supports a multiple attribute, which means that multiple selections can be supported, such as:

<input type= "File" accept= "image/*" multiple>

With this multiple, capture is useless, because multiple is specifically Yong to support multiple selections.

Two

PC-side upload file mostly with plug-in, Flash is not OK, but mobile if also use a variety of redundant plug-ins estimated to be sprayed to die, the project needs to do the image upload function, since H5 already have the relevant interface and compatibility is good, of course, priority to use H5 to achieve.

The main technologies used are:

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 packaged 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 users to upload non-required format file "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 > 1024x768) fileSize = (Math.Round (file.size */(1024x768)/+). ToString () +              ' MB ';            else FileSize = (Math.Round (file.size * 100/1024)/+). ToString () + ' KB ';          } funs.uploadfile (); },//asynchronous Upload file 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 files to form data funs.previewimage (file);//preview images before uploading, or preview txt by other means            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 picture contents 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:

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

Source: Https://git.oschina.net/sirius_swu/videoupload.git

Front-end Development tour-Mobile HTML5 for file upload