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

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

用的技术主要是:

ajax
FileReader
FormData

HTML结构:

         

登录后复制         

     

已经封装好的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  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 

调用方法:

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

登录后复制

PHP部分:


登录后复制

相关文章:

php中文件上传图片

php中文件上传图片

php中文件上传图片

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3126334.html

(0)
上一篇 2025年3月29日 20:22:22
下一篇 2025年3月29日 20:22:32

AD推荐 黄金广告位招租... 更多推荐

发表回复

登录后才能评论