基于firefox实现ajax图片上传
图片文件上传，有很多种协议的，这次主要讲的是“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
其实一开始还是被File api给误导了，一直以为是页面级别的
忽然发现，最后一个地址里面最上面就是用的这种方法。。看来还是看东西不认真，走了些弯路。
后记，通过向油猴插件那样，加入函数，支持chrome级别的File方法，我们就可以方便的上传照片了。
以上所述就是本文的全部内容了，希望大家能够喜欢。
相关文章
通达OA 使用Ajax和工作流插件实现根据人力资源系统数据增加OA账号(图文详解)
这篇文章主要介绍了通达OA 使用Ajax和工作流插件实现根据人力资源系统数据增加OA账号(图文详解),需要的朋友可以参考下2016-12-12
微软MSXML中的XMLHTTP组件基于URL Moniker，同时支持同步和异步HTTP/HTTPS访问远程主机资源的方法。这里提供基本的JavaScript代码以方便本地运行cscript.exe调试。2009-11-11
AJAX实现web页面中级联菜单的设计...2007-03-03
细数Ajax请求中的async:false和async:true的差异
下面小编就为大家带来一篇细数Ajax请求中的async:false和async:true的差异。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
jquery与php结合实现AJAX长轮询(LongPoll)
传统的AJAX轮询方式，客服端以用户定义的时间间隔去服务器上查询最新的数据。种这种拉取数据的方式需要很短的时间间隔才能保证数据的精确度，但太短的时间间隔客服端会对服务器在短时间内发送出多个请求。2015-10-10
常利用AJAX写一些页面无刷新的内容获取页面，这种方式很快捷也很方便，但其中有一个问题，就是如果两次提交的参数相同时，返回的内容只返回上次获取的内容，如果我们在第一次修改了参数，第二次再次调用却会发现页面根本没有改变。2008-09-09
用AJAX技术实现在自己Blog上聚合并显示朋友Blog的最新文章
在自己Blog上聚合并显示朋友Blog的最新文章，这样方便自己及时了解朋友的消息，另外，也方便访问者找到和本Blog相关的blog和文章2014-05-05
这篇文章主要为大家详细介绍了AJAX检测用户名是否存在，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
这篇文章主要介绍了ajax调用简单实例,结合实例形式分析了基于ajax调用讲URL返回数据填充到指定div的功能,需要的朋友可以参考下2015-12-12
Flash & Ajax 操作 XML 实例:无刷新分页...2006-08-08
最新评论