怎么使用 js post 图片 上传？

[onji]

http://pic.onji.cn/upload.html

这个是用 html 表单 post 会跳转到 php 文件。 点上传跳到 php 页面输出图片链接。（外链）

有没有什么办法可以不跳转，直接在本页面显示输出的图片链接吗？ JS 可以，但是我不会这个。 有哪位大神可以教下吗？或者私聊也行。[e-mail]

jquery ajax 都不会，求大神帮助。

[airyland]

话说不会写也会搜吧

[onji]

@airyland 搜过，一下午，没解决成功。

[Joan]

http://yunzhu.iteye.com/blog/2177923
随便找了个感觉符合需求~~

[onji]

@Joan 谢谢，迟点我看看。

[sparkle2015]

1. 后台代码是你们自己控制的吗 (从图上的 url 来看，应该是的)？如果是的话，就修改后台代码，让后台在接收图片后，重新渲染 "http://pic.onji.cn/upload.html" 这个 url，并把图片的 url 显示在此页面的 img 元素中，而不是 redirect_to 到新的 url。

1. 第二种方法，在前端用 ajax 请求，后台接收图片后，发现如果是 ajax 请求，则把图片 url 以 json 形式返回，前端拿到 url 后把它的值设置到 img 的 src 属性中。[示例代码]( https://github.com/baurine/rails-study/blob/master/upload_file_demo/app/views/resumes/new.html.erb)。

[Maxbee]

之前遇到这样的问题。也是尝试了一段时间才试出来。你可以用 input 标签 type 是 file 类型的，选择图片之后监听 change 事件 ，再用 ajax post 图片数据就行。这样页面不会跳转

[popok]

ajax，post 完后，把返回的图片链接地址插到 image 里去

[Wy4q3489O1z996QO]

base64(img)

[justtery]

去百度搜 bootstrap file input 给你想要的，照着 demo 写就好了

[chairuosen]

这里本质的原因是原生 post 是跳页面的，后续步骤你控制不了，ajax 是不跳页面的，请求过程是可以控制的。

[xiaoz]

还是用 ajax 实现最简单

[mingyun]

ajax formdata

[test4zhou]

转 base64

[qiayue]

有很多 js 图片上传控件，能够显示上传进度，比如 http://www.plupload.com/

[tcsky]

http://devdocs.io/dom/formdata/formdata

[v1024]

表单 target 指向一个隐藏的 iframe 的 id

[gdtv]

@romotc
@test4zhou
base64 的方法似乎挺耗资源

[Wy4q3489O1z996QO]

@gdtv 等你的业务发展到需要考虑这点性能之前早就换到七牛了

[dollarbai]

ajax formdata 这个可以解决问题，不过低版本浏览器不支持这个 formdata 对象。
对于低版本浏览器，就可以使用前后端公用一种加密解密方式（比如 base64 ）

[AJian]

用 iframe 可以吧