javascript html5移动端轻松实现文件上传

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

用的技术主要是:

  • ajax
  • FileReader
  • FormData

HTML结构:

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

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

调用方法:

$(".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);
}
?>

更多精彩内容请参考专题《ajax上传技术汇总》,《javascript文件上传操作汇总》和《jQuery上传操作汇总》进行学习。

希望本文所述对大家学习有所帮助。

(0)

相关推荐

  • Vue.js 2.0 移动端拍照压缩图片上传预览功能

    在学习和使用Vue.js 2.0 的过程中遇到不少不一样的地方,本来移动端开发H5应用,准备将mui框架和Vue.js+vue-router+vuex 全家桶结合起来使用,但是在拍照上传的实现过程中遇到了无法调用plus的H5+接口的问题,所以最后拍照上传功能还是使用input file方式里解决的.但是内心还是不甘心的,由于项目进度推进,迭代版本,所以不得不放弃,后续可能我将此功能使用调用H5+接口实现. 首先我来讲我实现这个拍照预览压缩上传的思路,准确的说应该是拍照或选择图片压缩之后预览及上

  • JS移动端/H5同时选择多张图片上传并使用canvas压缩图片

    最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候的想法是如果给file表单加了 multiple 属性就没有办法调用手机的摄像头拍照了,如果不加,就无法同时选择多张图片,于是我就照实跟同事说了这个情况.但回头一想,单张图片可以上传,那多张图片呢?于是就有了本文的内容. HTML5定义了 FileReader 作为文件 API 的重要成员用于读取文

  • 详解angularJS+Ionic移动端图片上传的解决办法

    前端开发中经常会碰到图片上传的问题,网上的解决办法很多,可是有些图片上传的插件会有一些附属的插件,因此因为一个图片上传的问题可能额需要引入其他插件到项目中,久而久之项目会不伦不类,有时候插件之间也会有一些冲突,所以我们可以自己写一个图片上传的方法. 今天的demo是帮朋友做的一个移动端微信公众号项目,项目架构采用angular+ionic,因为对dom的操作jQuery会方便很多,但是jQuery比较厚重,所以最后选择用轻量级的zepto来对项目dom进行操作. 项目中有一个需求是上传个人作品,

  • js移动端图片压缩上传功能

    移动端图片压缩上传功能如何实现? 做移动端开发的时候,form里面的file后台经常获取不到,用foemdata也拿不到 找到了一个formdata的脚本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0, maximum-

  • Vue.js 2.0 移动端拍照压缩图片预览及上传实例

    在学习和使用Vue.js 2.0 的过程中遇到不少不一样的地方,本来移动端开发H5应用,准备将mui框架和Vue.js+vue-router+vuex 全家桶结合起来使用,但是在拍照上传的实现过程中遇到了无法调用plus的H5+接口的问题,所以最后拍照上传功能还是使用input file方式里解决的.但是内心还是不甘心的,由于项目进度推进,迭代版本,所以不得不放弃,后续可能我将此功能使用调用H5+接口实现. 首先我来讲我实现这个拍照预览压缩上传的思路,准确的说应该是拍照或选择图片压缩之后预览及上

  • javascript html5移动端轻松实现文件上传

    PC端上传文件多半用插件,引入flash都没关系,但是移动端要是还用各种冗余的插件估计得被喷死,项目里面需要做图片上传的功能,既然H5已经有相关的接口且兼容性良好,当然优先考虑用H5来实现. 用的技术主要是: ajax FileReader FormData HTML结构: <div class="camera-area"> <form enctype="multipart/form-data" method="post">

  • Netty 轻松实现文件上传功能

    今天我们来完成一个使用netty进行文件传输的任务.在实际项目中,文件传输通常采用FTP或者HTTP附件的方式.事实上通过TCP Socket+File的方式进行文件传输也有一定的应用场景,尽管不是主流,但是掌握这种文件传输方式还是比较重要的,特别是针对两个跨主机的JVM进程之间进行持久化数据的相互交换. 而使用netty来进行文件传输也是利用netty天然的优势:零拷贝功能.很多同学都听说过netty的"零拷贝"功能,但是具体体现在哪里又不知道,下面我们就简要介绍下: Netty的&

  • Node.js上传文件功能之服务端如何获取文件上传进度

    内容概述 multer是常用的Express文件上传中间件.服务端如何获取文件上传的进度,是使用的过程中,很常见的一个问题.在SF上也有同学问了类似问题<nodejs multer有没有查看文件上传进度的方法?>.稍微回答了下,这里顺便整理出来,有同样疑问的同学可以参考. 下文主要介绍如何利用progress-stream获取文件上传进度,以及该组件使用过程中的注意事项. 利用progress-stream获取文件上传进度 如果只是想在服务端获取上传进度,可以试下如下代码.注意,这个模块跟Ex

  • JavaScript使用享元模式实现文件上传优化操作示例

    本文实例讲述了JavaScript使用享元模式实现文件上传优化操作.分享给大家供大家参考,具体如下: 一.享元模式是一种用于性能优化的模式,主要优化方式为,若系统中因为创建了大量类似的对象而导致内存占用过高,则可以考虑使用享元模式实现. 二.实例说明: 如果在浏览器中上传文件,若使用常规写法, 每上传一个文件,就会创建一个实例对象:如果上传2000个文件,那就有2000个对象,浏览器很可能出现假死状态.这种情况下,我们考虑适应享元模式. 三.实例: var Upload = function(

  • jquery Form轻松实现文件上传

    很久开始前就用这个插件了,每次都忘记具体的调用方法,特地写个demo记录下. 先上这个demo的传送门,恩!然后开始了... ①先是html <a href="javascript:void(0)" class="j_upLoadFile">上传图片</a> <form action="接口名字" method="post" enctype="multipart/form-data&qu

  • 使用PHP和HTML5 FormData实现无刷新文件上传教程

    无刷新文件上传是一个常见而又有点复杂的问题,常见的解决方案是构造 iframe 方式实现. 在 HTML5 中提供了一个 FormData 对象 API,通过 FormData 可以方便地构造一个表单请求,并通过 XMLHttpRequest 来发送.通过 FormData 对象发送文件也是可以的,如此则无刷新上传就变的非常简单了. 那么 FormData 怎么使用呢?下面我们对此进行简单的介绍. 1. 构造 FormData 对象 想得到一个FormData对象,很简单: var fd = n

  • Javascript使用uploadify来实现多文件上传

    使用uploadify来实现文件上传能够客户端判断文件大小.控制文件上传的类型.实现多文件上传.显示进度条等功能,方便易用,兼容性较好. 本例是把dwz中整合uploadify功能抽取出来的,可以进行单独使用,不一定要遭dwz中才能使用,本例只是为了测试,所以使用静态页面进行测试: 话不多说,代码敬上: 2,html页面的代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html&g

  • php轻松实现文件上传功能

    本文分为五个部分针对php上传文件进行分析讲解,具体内容如下 文件上传变量 将服务器上的临时文件移动到指定目录下 php.ini上传相关配置 error错误号 单文件上传实例 1.文件上传变量 //$_FILES:文件上传变量 #name 文件的名称 #type 文件的类型 #tmp_name 临时文件名 #size 文件的大小 #error 错误信息 $filename = $_FILES["myFile"]["name"]; $type = $_FILES[&q

  • H5手机端多文件上传预览插件

    基于zepto,支持多文件上传,进度和图片预览,用于手机端. (function ($) { $.extend($, { fileUpload: function (options) { var para = { multiple: true, filebutton: ".filePicker", uploadButton: null, url: "/home/MUploadImg", filebase: "mfile",//mvc后台需要对应的

  • Java Web使用Html5 FormData实现多文件上传功能

    前一阵子,迭代一个线上的项目,其中有一个图片上传的功能,之前用的ajaxfileupload.js来实现上传的,不过由于ajaxfileupload.js,默认是单文件上传(虽然可以通过修改源码的方法来实现多文件上传),又加上是在移动端做的,所以就打算采用html5的FormData实现多文件上传 首先html页面定义有两种: Html1 <form enctype="multipart/form-data" id="formfile"> <inp

随机推荐