站内搜索

移动端HTML5实现文件上传_HTML/Xhtml_网页制作

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

用的技术主要是：

ajax

FileReader

FormData

HTML结构：

XML/HTML Code复制内容到剪贴板
  1. <div class="camera-area">
  2. <form enctype="multipart/form-data" method="post">
  3. <input type="file" name="fileToUpload" class="fileToUpload" accept="image/*" capture="camera"/>
  4. <div class="upload-progress"><span></span></div>
  5. </form>
  6. <div class="thumb"></div>
  7. </div>

已经封装好的upload.js，依赖zepto

JavaScript Code复制内容到剪贴板
  1. (function($) {
  2. $.extend($.fn, {
  3. fileUpload: function(opts) {
  4. this.each(function() {
  5. var $self = $(this);
  6. var doms = {
  7. "fileToUpload": $self.find(".fileToUpload"),
  8. "thumb": $self.find(".thumb"),
  9. "progress": $self.find(".upload-progress")
  10. };
  11. var funs = {
  12. //选择文件，获取文件大小，也可以在这里获取文件格式，限制用户上传非要求格式的文件
  13. "fileSelected": function() {
  14. var files = (doms.fileToUpload)[0].files;
  15. var count = files.length;
  16. for (var index = 0; index < count; index++) {
  17. var file = files[index];
  18. var fileSize = 0;
  19. if (file.size > 1024 * 1024)
  20. fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
  21. else
  22. fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
  23. }
  24. funs.uploadFile();
  25. },
  26. //异步上传文件
  27. uploadFile: function() {
  28. var fd = new FormData();//创建表单数据对象
  29. var files = (doms.fileToUpload)[0].files;
  30. var count = files.length;
  31. for (var index = 0; index < count; index++) {
  32. var file = files[index];
  33. fd.append(opts.file, file);//将文件添加到表单数据中
  34. funs.previewImage(file);//上传前预览图片，也可以通过其他方法预览txt
  35. }
  36. var xhr = new XMLHttpRequest();
  37. xhr.upload.addEventListener("progress", funs.uploadProgress, false);//监听上传进度
  38. xhr.addEventListener("load", funs.uploadComplete, false);
  39. xhr.addEventListener("error", opts.uploadFailed, false);
  40. xhr.open("POST", opts.url);
  41. xhr.send(fd);
  42. },
  43. //文件预览
  44. previewImage: function(file) {
  45. var gallery = doms.thumb;
  46. var img = document.createElement("img");
  47. img.file = file;
  48. doms.thumb.html(img);
  49. // 使用FileReader方法显示图片内容
  50. var reader = new FileReader();
  51. reader.onload = (function(aImg) {
  52. return function(e) {
  53. aImg.src = e.target.result;
  54. };
  55. })(img);
  56. reader.readAsDataURL(file);
  57. },
  58. uploadProgress: function(evt) {
  59. if (evt.lengthComputable) {
  60. var percentComplete = Math.round(evt.loaded * 100 / evt.total);
  61. doms.progress.html(percentComplete.toString() + '%');
  62. }
  63. },
  64. "uploadComplete": function(evt) {
  65. alert(evt.target.responseText)
  66. }
  67. };
  68. doms.fileToUpload.on("change", function() {
  69. doms.progress.find("span").width("0");
  70. funs.fileSelected();
  71. });
  72. });
  73. }
  74. });
  75. })(Zepto);

调用方法：

JavaScript Code复制内容到剪贴板
  1. $(".camera-area").fileUpload({
  2. "url": "savetofile.php",
  3. "file": "myFile"
  4. });

PHP部分：

PHP Code复制内容到剪贴板
  1. <?php
  2. if (isset($_FILES['myFile'])) {
  3. // Example:
  4. writeLog($_FILES);
  5. move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
  6. echo 'successful';
  7. }
  8. function writeLog($log){
  9. if(is_array($log) || is_object($log)){
  10. $log = json_encode($log);
  11. }
  12. $log = $log."/r/n";
  14. file_put_contents('log.log', $log,FILE_APPEND);
  15. }
  16. ?>

以上就是本文的全部内容，希望对大家的学习有所帮助。

原文：http://www.cnblogs.com/hutuzhu/p/5254532.html

  • 上一篇：不可不知的HTML优化技巧_HTML/Xhtml_网页制作
  • 下一篇：一些HTML代码的编写风格建议小结_HTML/Xhtml_网页制作