美文网首页
js上传图片后不上传服务器预览图

js上传图片后不上传服务器预览图

作者: Super_龙 | 来源:发表于2018-11-29 10:38 被阅读3次

前端上传图片时候有时候是先显示或者看一下放到内容的效果 未必上传 这时候用到下面的方法

// 绑定change事件
 $("#image_file").change(function(){

        var objUrl = getObjectURL(this.files[0]) ;
        console.log("objUrl = "+objUrl) ;
        if (objUrl) {
           //img标签通过id显示图片的内容
            $("#preview").attr("src", objUrl) ;
        }
    }) ;

//建立一個可存取到該file的url
    function getObjectURL(file) {

        var url = null ;
        if (window.createObjectURL != undefined) { // basic

            url = window.createObjectURL(file) ;

        } else if (window.URL != undefined) { // mozilla(firefox)

            url = window.URL.createObjectURL(file) ;

        } else if (window.webkitURL != undefined) { // webkit or chrome

            url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
    }

方法很多 提供一个供参考使用!

相关文章

  • js上传图片后不上传服务器预览图

    前端上传图片时候有时候是先显示或者看一下放到内容的效果 未必上传 这时候用到下面的方法 方法很多 提供一个供参考使用!

  • vue多图上传到阿里云

    结合这两篇文章小程序选择图片、预览,上传到阿里云和阿里云上传图片 引入js 做循环判断上传成功后再上传下一张图 循...

  • PHP 记录自己的图片上传(单图和多图)

    单图上传:html: js: 处理图片上传 多图上传 和单图没啥区别,就是循环上传html: js: 处理多图...

  • Laravel 中 bootstrap fileinput 图

    1、 图片上传并预览 效果展示: 2 图片上传成功之后的预览 图片上传之后编辑预览效果展示: 3 图片预...

  • iOS 照片上传服务器旋转90度解决办法

    最近在处理移动端选择图片实时预览并上传时遇到一个问题:上传前图片预览正常,但上传到服务器上的图片展示到页面上时,有...

  • 图片上传(web前端)

    图片上传,图片预览,可以删除预览图片,最多上传3张,需引入jquery,demo里用到了阿里巴巴矢量图,所以粘贴我...

  • js图片上传预览

    项目中碰到一个需求,上传图片及时给用户预览。开始的想法就是上传的图片先传递到后台,在通过ajax获取图片路径显示到...

  • JS图片上传预览

    划水摸鱼的时候研究了JS图片的上传预览,分别是FileReader()、createObjectURL(),在此分...

  • 图片上传前预览需求

    图片上传前预览需求 很多业务场景下,我们需要在用户上传图片前,先预览待上传的图片

  • 封装直传阿里云存储文件上传控件

    本文目标 封装一个直传阿里云OSS云存储图片上传控件 控件效果图 上传之前 上传成功 预览图片 文件上传前后台及阿...

网友评论

      本文标题:js上传图片后不上传服务器预览图

      本文链接:https://www.haomeiwen.com/subject/psyxcqtx.html