移动端通过HTML5实现文件上传功能-H5教程-PHP中文网

移动端通过HTML5实现文件上传功能

PHP中文网

发布： 2017-03-27 16:39:41

原创

2985人浏览过

pc端上传文件多半用插件，引入flash都没关系，但是移动端要是还用各种冗余的插件估计得被喷死，项目里面需要做图片上传的功能，既然h5已经有相关的接口且兼容性良好，当然优先考虑用h5来实现。

用的技术主要是：

ajax
FileReader
FormData

HTML结构：

<p class="camera-area">   
      <form enctype="multipart/form-data" method="post">   
        <input type="file" name="fileToUpload" class="fileToUpload" accept="image/*" capture="camera"/>   
          <p class="upload-progress"><span></span></p>   
        </form>   
      <p class="thumb"></p>   
  </p>

登录后复制

已经封装好的upload.js，依赖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);

登录后复制

调用方法：

支点微信墙程序 F2.0

支点微信墙F2.0推出了!在前段时间推出的F1.0的基础上，新加了微信摇一摇和启动仪式的功能。修复了微信墙无默认头像的功能，修复了微抽奖的BUG，修复了微信公众平台有时接收信息不回复的功能。（原F1.0功能介绍：现场关注主办方微信公众号,粉丝迅速涨,让大家都High起来吧!互动加粉,触手可得!微信墙文字抽奖,一墙搞定!通过微信平台,你可以实现文字讨论,更能够实现投票,对对碰,交换名片等趣味性和互动

查看详情

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

登录后复制

PHP部分：

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

登录后复制

php中文件上传图片

JavaScript进阶(九)JS实现本地文件上传至阿里云服务器

HTML5应用之文件上传的详细介绍