移动端HTML5实现打电话，发短信，发邮件，文件上传

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

用的技术主要是：

ajax

FileReader

FormData

HTML结构：

       form enctype="multipart/form-data" method="post"             input type="file" name="fileToUpload"  accept="image/*" capture="camera"/               div  span /span /div             /form           div  /div       /div   
          "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);  
    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);    }    ?   
resumable.js —— 基于 HTML 5 File API 的文件上传组件 支持续传 resumable.js是一个 JavaScript 库，通过 HTML5 文件 API 提供了稳定和可恢复的批量上传功能。在上传大文件的时候将文件分割成小块，每块在上传失败的时候，上传会不断重试直到程序完成。这允许上传到本地或服务器的网络连接丢失后能够自动恢复上传。由于采用了分块技术，它也允许用户暂停和恢复上传。
HTML5文件上传组件的深度剖析 对于文件上传，相信还有不少同学还停留在FLASH时代，其实现在 HTML5 不仅可以实现文件上传，而且可以做得更好。 以下是对 HTML5 与 FLASH 就文件上传方面的功能调研测试得出的结果。
HTML5 FormData实现文件上传实例 原文:HTML5 FormData实现文件上传实例 表单提交，文件上传是一个常用又十分麻烦的功能，以前要上传文件通常都是借助插件或者flash来实现，噼里啪啦的加载一大堆东西。自从有了HTML5的FormData后，老板再也不用担心我的上传了。
html5文件上传 上文介绍了如何通过ajax异步上传文件，html5对file的新接口，可以使得在页面上，对用户也有更好的体验。 页面上要做的，仅仅是添加一个html标签： [cce lang= html ] input id= track name= track type= file multiple