当前位置: > 计算机专业 > web前端开发 >

文件上传的渐进式增强_前端开发工程师

编辑: 时间:2017-08-21 16:09:44 来源:亚洲城ca88_唯一官网官方网站 点击:

  文件上传是较古老的互联网操作之一。

  20多年了,它几乎没变,还是原来的样子:操作麻烦、缺乏交互、用户体验不佳。在这个新技术日新月异的时代,显得非常落伍。

  网页开发者们想了很多办法,试图提升文件上传的功能和操作体验,在各种 Javascript 库的基础上,开发了五花八门的。可是,由于不同浏览器之间的差异,缺乏统一接口,这些插件要么用起来很麻烦,要么不能普遍适用。

  HTML5提供了一系列新的浏览器 API,使得文件上传有可能出现革命性变化。英国程序员 总结了这些,本文在他的文章基础上,讨论如何采用 HTML5 的 API,对文件上传进行渐进式增强,实现以下功能:

  • iframe 上传
  • ajax 上传
  • 进度条
  • 文件预览
  • 拖放上传

  为了对这些功能有一个感性认识,你可以先看看 Remy Sharp 提供的。

  虽然这些 API,还没有得到广泛部署,但它们是未来的潮流。有了它们,代码就可以写得非常优雅简洁,上面五个功能都能在 20 行以内实现。

  一、传统形式

  让大家从较基本的开始。

  文件上传的传统形式,是使用表单元素 file:

<form action="upload.php" method="post" enctype="multipart/form-data" >
<input type="file" name="upload" /> <br />
<input type="submit" value="Upload" />
</form>

  所有浏览器都支撑上面的代码。它在 IE 浏览器中,显示如下:

  用户先选择文件,然后点击"Upload"按钮,文件开始上传。

  二、iframe 上传

  传统的表单上传,属于"同步上传"。也就是说,点击上传按钮后,网页"锁死",用户只能等待上传结束,然后浏览器刷新,跳到表单的 action 属性指定的网址。

  有没有办法"异步上传",在网页不重载的情况下,完成整个上传过程呢?

  在 HTML5 没有出现之前,只能使用 iframe 做到这一点。用户点击 submit 时,动态插入一个 iframe 元素(以下代码使用了 jQuery 函数库)。

var form = $("#upload-form");
form.on ('submit',function () {
  // 此处动态插入 iframe 元素
});

  插入 iframe 的代码如下:

var seed = Math.floor(Math.random() * 1000);
var id = "uploader-frame-" + seed;
var callback = "uploader-cb-" + seed;
var iframe = $('<iframe id="'+id+'" name="'+id+'" style="display:none;">');
var url = form.attr('action');
form.attr('target', id).append(iframe).attr('action', url + '?iframe=' + callback);

  较后一行,有两个地方值得注意。首先,它为表单添加 target 属性,指向动态插入的 iframe 窗口,这使得上传结束后,服务器将结果返回 iframe 窗口,所以当前页面就不会跳转了。其次,它在 action 属性指定的上传网址的后面,添加了一个参数,使得服务器知道回调函数的名称。这样就能将服务器返回的信息,从 iframe 窗口传到上层页面。

  服务器(upload.php)返回的信息,应该是如下形式:

<script type="text/javascript">
window.top.window['callback'](data);
</script>

  然后,在当前网页定义回调函数:

window[callback] = function (data){
  console.log ('received callback:', data);
  iframe.remove (); //removing iframe
  form.removeAttr ('target');
  form.attr ('action', url);
  window[callback] = undefined; //removing callback
};

  三、ajax 上传

  HTML5 提出了 XMLHttpRequest 对象的,从此 ajax 能够上传文件了。这是真正的"异步上传",是将来的主流。上一节的 iframe 上传,可以用作老式浏览器的替代方案。

  ajax 上传代码,放在表单的 submit 事件回调函数中:

form.on ('submit',function () {
  // 此处进行 ajax 上传
});

  大家主要用的是 ,它能够构建类似表单的键值对。

// 检查是否支撑 FormData
if(window.FormData) {
  var formData = new FormData ();
  // 建立一个 upload 表单项,值为上传的文件
  formData.append ('upload', document.getElementById('upload').files[0]);
  var xhr = new XMLHttpRequest ();
  xhr.open ('POST', $(this).attr('action'));
  // 定义上传完成后的回调函数
  xhr.onload = function () {
    if (xhr.status === 200) {
      console.log ('上传成功');
    } else {
      console.log ('出错了');
    }
  };
  xhr.send (formData);
}

  四、进度条

  XMLHttpRequest 第二版还定义了一个 ,可以用来制作进度条。

  首先,在页面中放置一个 HTML 元素 progress。

<progress min="0" max="100" value="0">0</progress>

  然后,定义 progress 事件的回调函数。

xhr.upload.onprogress = function (event) {
  if (event.lengthComputable) {
    var complete = (event.loaded / event.total * 100 0);
    var progress = document.getElementById ('uploadprogress');
    progress.value = progress.innerHTML = complete;
  }
};

  注意,progress 事件不是定义在 xhr,而是定义在 xhr.upload,因为这里需要区分下载和上传,下载也有一个 progress 事件。

  五、图片预览

  如果上传的是图片文件,利用 ,大家可以做一个图片文件的预览。这里主要用到 。

// 检查是否支撑 FileReader 对象
if (typeof FileReader != 'undefined') {
  var acceptedTypes = {
    'image/png': true,
    'image/jpeg': true,
    'image/gif': true
  };
  if (acceptedTypes[document.getElementById ('upload') .files[0].type] === true) {
    var reader = new FileReader ();
    reader.onload = function (event) {
      var image = new Image ();
      image.src = event.target.result;
      image.width = 100;
      document.body.appendChild (image);
    };
    reader.readAsDataURL (document.getElementById ('upload') .files[0]);
  }
}

  六、拖放上传

  较后,利用 HTML5 的,实现拖放上传。

  先在页面中放置一个容器,用来接收拖放的文件。

<div></div>

  对它设置样式:

#holder {
border: 10px dashed #ccc;
width: 300px;
min-height: 300px;
margin: 20px auto;
}
#holder.hover {
border: 10px dashed #0c0;
}

  拖放文件的代码,主要是定义 dragover、dragend 和 drop 这三个事件。

// 检查浏览器是否支撑拖放上传。
if('draggable' in document.createElement ('span')){
  var holder = document.getElementById ('holder');
  holder.ondragover = function () { this.className = 'hover'; return false; };
  holder.ondragend = function () { this.className = ''; return false; };
  holder.ondrop = function (event) {
    event.preventDefault ();
    this.className = '';
    var files = event.dataTransfer.files;
    // do something with files
  };
}

  完成后的效果和总体代码,请看拖放上传 。

TAG标签:

转载请注明源自亚洲城ca88_唯一官网App官方网站

★www.sxxhce.cn★

------分隔线----------------------------

专业课程

同类热门文章

新濠天地娱乐手机版 新濠天地 新濠电玩城手机版 新濠天地娱乐手机版 新濠电玩城官网下载 新濠天地娱乐官网3559 新豪天地880988.com 新濠天地娱乐官网15969
ca88唯一官网ca88唯一官网|资讯中心|精彩视频|专业设置|官方网站环境|就业保障|名师风采|网站地图|

亚洲城ca88_唯一官网官方网站

地址:亚洲城省西安市北稍门振华北路4号(西安市第十中学东侧)邮编:710014电话:029-82519999

高新校区地址:西安市雁塔区鱼斗路259号

陕ICP备11004055号-3www.sxxhce.cn

亚洲城ca88_唯一官网App官方网站Copyright@2006-2016 www.sxxhce.cn.All Rights Reserved.

声明:任何企业或个人不得以任何商业目的复制或传递本网站所载述的商标、文字、影像及图形图象,分享转载需注明来源本网站

Copyright©2006-2016 Sxxhce.Cn All Rights Reserved.Optimized for 1024x768 to Firefox,MS-IE6 IE7.   版权所有:北京朗杰科技有限企业

XML 地图 | Sitemap 地图