skyADMIN

ajax异步上传图片

上传图片这个问题我一直不是很会,比较简单比较传统的方法是在前端里写一个form表单,input的type填file,可接受类型选image/*。

然后提交表单的时候自然就上传了,至于原理,不清楚。至于怎么接受,那就是后端的事儿了哈哈哈哈。

但是现在做个SPA,不带跳转的单页应用,所有的表单都是用ajax提交的,怎么把图片也用ajax提交呢。

首先试试传统的方法,给input绑个模型,在js里取出来看,啥也没有。

用jq或者原生,也取不出来东西,有人说取出来也没用,只是个路径。要转流然后上传。

呵呵,听不懂。

不过我知道有个叫base64编码的东西,可以把图片变成一长串文字,超长一串。但是长没事啊,字符串好操作啊,传个字符串毫无压力啊。

搜索,input image base64关键字,终于在一个stackoverflow回答里找到了相当靠谱的答案:http://stackoverflow.com/questions/17710147/image-convert-to-base64,第一个回答。

使用的原生js实现的,这段代码其实我还没看懂。我也特别好奇,明明很简单的一段代码,为什么我稍微改改就不对了。我就改了下选择元素,它用的原生的getElementById,还简单封装了一下,我改成了jquery的选择器,就不工作了。好吧,先拿着用,以后有空了再看看。

 

码字很辛苦,转载请注明来自环宇博客《ajax异步上传图片》

评论

  1. 对于“传统的方法”一节:提交上传文件的表单时,需要让浏览器发送POST请求,并且数据格式必须是multipart/form-data。而一般的表单用application/x-www-form-urlencoded(就像地址栏上那一堆?和&,只不过不在明面上)就可以。因此,如果想用AJAX上传文件,可以使用从HTML5开始引入的FormData对象,这样无论使用原生API还是jq上传都会更容易。但是文件也有缺点,就是安全性问题,这就得看后端负不负责任了。现在回到上传图片的问题上,既然只有图片,那么问题可以变得更简单。图片本身可以编码成base64,甚至可以写成(当然不要这样做否则会被用户骂死)。编码的话,除了FileReader,还可以canvas.toDataURL()。至于解码,让后端自己去干吧,不过其实也不难。如果有人还在用古老的浏览器,那么前面说的就都没用了:还是得用传统的表单提交,或者造个iframe,在里面造个表单,然后submit进行文件上传(看起来好像是ajax一样)。长时间不写程序,前面都是胡说的,千万别信。

    • 普通表单提交x-www-form-urlencoded是一堆=和&,我打错了,多说还不能改。唉,真是都忘了。使用AJAX时也可以选择application/json(不行)。但是无论如何,上传文件一定要用multipart/form-data。想自己发明编码的话,问题可就不得了了,老版本IE浏览器没有文件API,想读取文件的话就得new ActiveXObject(“Scripting.FileSystemObject”),但这种代码可能还会被新浏览器以安全为由禁止运行。