V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
onji

怎么使用 js post 图片 上传?

  •  
  •   onji · Jul 16, 2017 · 5626 views
    This topic created in 3207 days ago, the information mentioned may be changed or developed.

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

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

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

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

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