V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
onji
V2EX  ›  JavaScript

怎么使用 js post 图片 上传?

  •  
  •   onji · 2017-07-16 20:01:37 +08:00 · 4762 次点击
    这是一个创建于 2665 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

    24 条回复    2017-07-25 07:45:30 +08:00
    airyland
        1
    airyland  
       2017-07-16 20:02:41 +08:00 via iPhone
    话说不会写也会搜吧
    onji
        2
    onji  
    OP
       2017-07-16 20:03:43 +08:00
    @airyland 搜过,一下午,没解决成功。
    Joan
        3
    Joan  
       2017-07-16 20:28:03 +08:00
    http://yunzhu.iteye.com/blog/2177923
    随便找了个感觉符合需求~~
    onji
        4
    onji  
    OP
       2017-07-16 20:28:56 +08:00
    @Joan 谢谢,迟点我看看。
    sparkle2015
        5
    sparkle2015  
       2017-07-16 20:53:55 +08:00
    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
        6
    Maxbee  
       2017-07-16 21:22:26 +08:00 via iPhone
    之前遇到这样的问题。也是尝试了一段时间才试出来。你可以用 input 标签 type 是 file 类型的,选择图片之后监听 change 事件 ,再用 ajax post 图片数据就行。这样页面不会跳转
    popok
        7
    popok  
       2017-07-16 21:41:27 +08:00 via iPhone
    ajax,post 完后,把返回的图片链接地址插到 image 里去
    Wy4q3489O1z996QO
        8
    Wy4q3489O1z996QO  
       2017-07-16 21:47:53 +08:00
    base64(img)
    justtery
        9
    justtery  
       2017-07-16 21:48:54 +08:00 via Android
    去百度搜 bootstrap file input 给你想要的,照着 demo 写就好了
    chairuosen
        10
    chairuosen  
       2017-07-16 22:12:17 +08:00
    这里本质的原因是原生 post 是跳页面的,后续步骤你控制不了,ajax 是不跳页面的,请求过程是可以控制的。
    xiaoz
        11
    xiaoz  
       2017-07-16 22:28:22 +08:00 via iPhone
    还是用 ajax 实现最简单
    mingyun
        12
    mingyun  
       2017-07-16 22:57:00 +08:00
    ajax formdata
    test4zhou
        13
    test4zhou  
       2017-07-16 22:58:01 +08:00
    转 base64
    qiayue
        14
    qiayue  
       2017-07-16 23:00:16 +08:00
    有很多 js 图片上传控件,能够显示上传进度,比如 http://www.plupload.com/
    tcsky
        15
    tcsky  
       2017-07-16 23:12:05 +08:00
    v1024
        16
    v1024  
       2017-07-16 23:47:58 +08:00 via iPhone
    表单 target 指向一个隐藏的 iframe 的 id
    gdtv
        17
    gdtv  
       2017-07-17 00:05:03 +08:00
    @romotc
    @test4zhou
    base64 的方法似乎挺耗资源
    Wy4q3489O1z996QO
        18
    Wy4q3489O1z996QO  
       2017-07-17 08:34:04 +08:00
    @gdtv 等你的业务发展到需要考虑这点性能之前早就换到七牛了
    dollarbai
        19
    dollarbai  
       2017-07-17 09:40:31 +08:00
    ajax formdata 这个可以解决问题,不过低版本浏览器不支持这个 formdata 对象。
    对于低版本浏览器,就可以使用前后端公用一种加密解密方式(比如 base64 )
    AJian
        20
    AJian  
       2017-07-17 10:07:20 +08:00
    用 iframe 可以吧
    ibcker
        21
    ibcker  
       2017-07-17 11:05:06 +08:00
    你写个标题的时间就够搜索出答案了,写个帖子明显低效
    onji
        22
    onji  
    OP
       2017-07-17 14:27:40 +08:00
    @ibcker 我当然知道搜索,不是搜索到的东西都真正用得上。
    dtlqwjj
        23
    dtlqwjj  
       2017-07-17 20:32:42 +08:00
    ajax 异步上传图片,通常有 3 种方式
    1.jquery.form
    2.FormData
    3.Filereader 读取图片,base64 编码。
    lavawong
        24
    lavawong  
       2017-07-25 07:45:30 +08:00 via iPhone
    如果要兼容 IE8 建议用 iframe 跨越,google 搜答案
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2723 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 08:35 · PVG 16:35 · LAX 01:35 · JFK 04:35
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.