zoukankan      html  css  js  c++  java
  • 中文前端UI框架Kit(八)无插件异步文件上传组件源码解析

    号外:kitjs官方讨论QQ群建立了,QQ群号88093625,欢迎大家加入,讨论前端相关话题

    上一篇介绍了上传组件的用法,以及api,这一篇,我们通过代码分析,从原理上给大家做下讲解

    demo地址:http://xueduany.github.com/KitJs/KitJs/index.html#upload

    (一)Dom结构

    我们首先看下上传按钮的dom结构

    image

    我们可以比较清楚看到在一层层div里面,嵌套了一个form元素input file,并且这个input file的面积足够大到覆盖外面的div通过Css渲染的按钮。这样点击了外面的div做的按钮,等于点击到input file,这样就能通过input file打开文件选择了。同理,图片上传的预览也是同理

    *可能有童鞋会问,input file不是有颜色的吗,ok,我们把他设置为透明就不会显示出来了,同时他的dom位置还在。

    (二)选择文件上传

    image

    首先绑定input file的change事件,当选中文件之后,触发上传事件

    image

    取到input.files开始上传

    image

    创建ajax链接,用post方式上传文件内容,在request头设置fileName

    content-type设置为Content-Type", "application/octet-stream"

    上传过程调用onprogress方法,显示进度条

    对于ie不支持这种上传方式,改为

    image

    创建iframe,在iframe创建form,并且利用表单提交的方式上传

    (三)拖拽上传

    拖拽上传,只支持高级浏览器,

    image

    关键点在于,浏览器会在drag和drop事件,把文件放入event对象的dataTransfer属性里面。

  • 相关阅读:
    弹性盒模型:flex多行多列两端对齐,列不满左对齐
    小程序之程序构造器App()
    微信小程序之执行环境
    微信小程序之 ECMAScript
    小程序~WeUI下载使用
    补充拓展:CSS权重值叠加
    微信小程序~模板template引用
    小程序~列表渲染~key
    一个完整URL的组成
    CSS的BEM规范学习
  • 原文地址:https://www.cnblogs.com/xueduanyang/p/2513518.html
Copyright © 2011-2022 走看看