您现在的位置是：网站首页> 编程资料编程资料

移动端HTML5实现文件上传HTML5 文件上传下载的实例代码HTML5拖拉上传文件的简单实例HTML5应用之文件上传HTML5+WebSocket实现多文件同时上传的实例移动端HTML5实现文件上传功能【附代码】html5实现多文件的上传示例代码HTML5拖拽文件到浏览器并实现文件上传下载功能代码HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法HTML5 FormData 方法介绍以及实现文件上传示例

2023-10-09 356人已围观

简介 这篇文章主要介绍了移动端HTML5实现文件上传的相关资料，利用H5轻松实现文件上传操作，感兴趣的小伙伴们可以参考一下

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>  
  8.   

已经封装好的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);//将文件添加到表单数据中   

    上一篇：天天酷跑神圣祝福有哪些 能开出哪些神圣道具_手机游戏_游戏攻略_

    下一篇：HTML学习笔记--HTML的语法详解(必看)HTML5中的nav标签学习笔记PHP-HTMLhtml重要知识点笔记(必看)HTML5学习笔记之html5与传统html区别 HTML设计模式日常学习笔记整理HTML基础笔记(推荐)

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网