javascript html5 mobile terminal easily implements file upload_javascript skills

Most files uploaded on the PC side use plug-ins. It doesn’t matter if you introduce flash. However, if the mobile side still uses various redundant plug-ins, it will probably be sprayed to death. The project needs to have the function of uploading images, since H5 already has related interfaces. And the compatibility is good, of course, priority is given to using H5 for implementation.

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 packaged 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 = {
     //选择文件，获取文件大小，也可以在这里获取文件格式，限制用户上传非要求格式的文件
     "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();
     },
     //异步上传文件
     uploadFile: function() {
      var fd = new FormData();//创建表单数据对象
      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);//将文件添加到表单数据中
       funs.previewImage(file);//上传前预览图片，也可以通过其他方法预览txt
      }
      var xhr = new XMLHttpRequest();
      xhr.upload.addEventListener("progress", funs.uploadProgress, false);//监听上传进度
      xhr.addEventListener("load", funs.uploadComplete, false);
      xhr.addEventListener("error", opts.uploadFailed, false);
      xhr.open("POST", opts.url);
      xhr.send(fd);
     },
     //文件预览
     previewImage: function(file) {
      var gallery = doms.thumb;
      var img = document.createElement("img");
      img.file = file;
      doms.thumb.html(img);
      // 使用FileReader方法显示图片内容
      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:

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

PHP part:

<&#63;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);
}
&#63;>

I hope this article will be helpful to everyone’s learning.