zoukankan      html  css  js  c++  java
  • ajax图片上传,基于firefox

    图片文件上传,有很多种协议的,这次主要讲的是“Content-Type:multipart/form-data;”的形式。

    在工作中前台一些静态文件是通过FTL模版系统,前台页面通过SSI进行引用的,项目开发的时候就需要生成大量的静态SHTML文件了,本来觉得应该是后台的事情,可是自从我进这公司,这快东西就交给了前端~~我表示无语,没办法就按着习惯来吧,但我是个懒人,就想着能不能通过ajax提交呢

    基于平时对MDN的翻阅,今天主要是FormData这个对象解决多文件上传的协议。

    https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/FormData

    似乎一切都完美了,但是在File方法,只能在chrome级别上才能运行。图片上传没办法实现,一般普通文件可以通过Blob对象实现

    下面通过了一些方法来实现,一个探索过程

    1.找了半天,URL转为File对象的方法,都失败了。。。

    2.HTML5 File方向

    a.通过HTML5 File的例子,开始

       https://developer.mozilla.org/en-US/docs/DOM/FileReader

      在例子里面,打印 oFREvent.target.result 只是找到了"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAUDBAQEAwUEBAQFBQ..."

      原来是base64编码的数据

      看到上边的编码数据,就想到Blob对象是不是支持啊,代码如下

    var fd = new FormData();
    fd.append('my-file', new Blob(["data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAUDBAQEAwUEBAQFBQ..."],{type:"image/jpeg"}));
    fd.append('my-file', new Blob(["data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAUDBAQEAwUEBAQFBQ..."],{type:"image/jpeg;base64"}));

    b..想到了base64是编码过了,通过方法解码下是不是可以

      网上找了一段base64编码解码的例子,套了一下

    fd.append('my-file', new Blob([new Base64().decode('/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAUDBAQEAwUEBAQFBQ...')],{type:"image/jpeg"}));

    抓包发现,正常传输文件和ajax数据不一样,那肯定是失败了

    3.浏览器页面级别为了安全,看来选择文件的操作是要自己手动下了

    https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects

    fd.append('my-file',document.querySelector(Selector).files[0])

    其实一开始还是被File api给误导了,一直以为是页面级别的

    忽然发现,最后一个地址里面最上面就是用的这种方法。。看来还是看东西不认真,走了些弯路。

    后记,通过向油猴插件那样,加入函数,支持chrome级别的File方法,我们就可以方便的上传照片了。

  • 相关阅读:
    LeetCode 230. Kth Smallest Element in a BST
    LeetCode 114. Flatten Binary Tree to Linked List
    LeetCode 222. Count Complete Tree Nodes
    LeetCode 129. Sum Root to Leaf Numbers
    LeetCode 113. Path Sum II
    LeetCode 257. Binary Tree Paths
    Java Convert String & Int
    Java Annotations
    LeetCode 236. Lowest Common Ancestor of a Binary Tree
    LeetCode 235. Lowest Common Ancestor of a Binary Search Tree
  • 原文地址:https://www.cnblogs.com/legu/p/3031244.html
Copyright © 2011-2022 走看看