9月16号上课内容

1 文件接口(文件接口主要是用来做图片文件上传,预览,编辑等操作以及多文件上传的)

1) 了解几个常见的对象(https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader)

File,FileList,Blob,ArrayBuffer

http://www.cnblogs.com/fly_dragon/archive/2012/06/02/2532035.html FileReader(https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader#.E4.BA.8B.E4.BB.B6.E5.A4.84.E7.90.86.E7.A8.8B.E5.BA.8F)

FormData,ArrayBuffer, Blob等对象的区别

http://www.zhangxinxu.com/wordpress/2013/10/understand-domstring-document-formdata-blob-file-arraybuffer/

FormData(https://developer.mozilla.org/zh-CN/docs/Web/API/FormData)

简单的例子:http://segmentfault.com/a/1190000002938709

插件:

主要是使用File做图片文件本地预览这些

2) 文件上传

了解几种常见的文件上传组建以及实现

  • 最原始的文件上传:

    • 在HTML4截断,简单的文件上传主要是通过form 表单提交
    • 有一些是使用flash做文件上传
    • 在H5之前做多文件上传,通常是多个input搞的
  • 进阶:

    • 使用H5 的File 接口做文件上传

    • 再然后就是用drag and drop 做拖拽上传了

      1)  form 表单提交千万不要忘记使用enctype
      2)  多文件上传使用multiple
      3)  drop,dropover 的时候e.preventDefault()
      4)  formData ajax,使用jquery,千万记得contentType,processData 都是false
      
  • 几个参考代码:

    • 1 H4 文件上传代码

      <form enctype= “multipart/form-data” action=“” >
        <input type=“file” />
      </form>
      
      异步的可以使用iframe里面嵌套form表单
      
    • 2 H5 文件上传

      1) 使用input  type=“file” 对象
      2) 使用FormData 
      
    • 3 多文件上传

      添加multiple=“multiple"
      

    http://fex.baidu.com/webuploader/

2 拖拽

简单的demo: http://www.w3school.com.cn/tiy/t.asp?f=html5_draganddrop

  • 几个比较常见的事件

    • 可拖拽元素必须添加draggable="true"

      1) dragstart, 2) dragend 3) dropover 4) drop

    • e.dataTransfer

    • drag and drop 相关代码

注意:对于图片拖拽上传,一定不要忘记e.preventDefault(), 不然浏览器就直接打开了图片

http://www.zhangxinxu.com/study/201109/html5-file-image-ajax-upload.html

作业

  • 瀑布流 和 滚动加载

  • 看下上面的文章链接