js 函数

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 ;
}

调用

document.getElementById('Jbtn').onchange = function() {
    var strsrc=getObjectURL(this.files[0]);
    $("#show_img").attr("src",strsrc);
}

getObjectURL 上传图片预览的更多相关文章

  1. HTML5上传图片预览

    <!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http ...

  2. JS 上传图片 + 预览功能(一)

    JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...

  3. jquery实现上传图片预览(需要浏览器支持html5)

    jquery实现上传图片预览(需要浏览器支持html5) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  4. HTML5上传图片预览功能

    HTML5上传图片预览功能 HTML代码如下: <!-- date: 2018-04-27 14:41:35 author: 王召波 descride: HTML5上传图片预览功能 --> ...

  5. js兼容火狐显示上传图片预览效果

    js兼容火狐显示上传图片预览效果[谷歌也适用] <!doctype html> <html> <head> <meta content="text/ ...

  6. 通过HTML5 FileReader实现上传图片预览功能

    原文:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html 在上传图片到服务器之前,我们希望可以预览一下要上传的图片. ...

  7. 去除ckeditor上传图片预览中的英文字母

    去除ckeditor上传图片预览中的英文字母 CKEDITOR.replace('text', { filebrowserImageUploadUrl : 'upload_img.do', langu ...

  8. HTML5 上传图片预览

    html5出现之前如果需要上传图片预览 一般都是先上传到服务器然后远程预览 html5出现之后   有个filereader 解决了这问题 //选中图片之后 $("#fileAddPic&q ...

  9. JavaScript 中的FileReader对象(实现上传图片预览)

    方法一:使用js的FileReader对象 1.FileReader对象简介 1.检测浏览器对FileReader的支持 if(window.FileReader) { var fr = new Fi ...

随机推荐

  1. 前端-JavaScript1-6——JavaScript之变量类型的转换

    6.1 string → number 先来学习一个语句,这个语句和alert差不多,也是弹窗,弹的是输入框: 1    prompt("请输入你的电话","139&qu ...

  2. 网络之TCP握手总结

    目录: 31.Tcp握手的一些问题? 21.Tcp三次握手及SYN攻击: 四次握手? 为什么建立连接是三次握手,而关闭连接却是四次挥手? 13.TCP释放连接四次握手 12.TCP建立连接三次握手 1 ...

  3. storj白皮书v3最全面解读,Docker创始人的加入能否扳倒AWS S3

    Storj新发了白皮书v3,地址是:https://storj.io/storjv3.pdf. 这次白皮书一共有90页,看完还真要费不少时间.如果你没有时间看,可以看一下我这篇快速技术解读. 上次St ...

  4. 在pycharm_2018.2版本中开启Flask的debug的方法 (不要用命令:python **.py启动)

    断点后,先ctl+c关闭控制台程序,再点击debuger调试 问题描述:在pycharm_2018.2版本中,我明确开启了debug,代码如下所示: from flask import Flask a ...

  5. 【待考察】Appium使用技巧,助你快速入门移动端自动化!

    Appium使用技巧,助你快速入门移动端自动化! 原创: 柠檬班superman 柠檬班软件测试 1月4日 关注并置顶[柠檬班]的小哥哥小姐姐 “猪”年行大运 说说最近研究移动端的自动化 移动端的自动 ...

  6. 版本控制(svn、Git)环境创建

    1.SVN 2.Git last 版本控制工具应该具备的功能: 协同修改: 数据备份: 版本管理: 权限控制: 历史记录:查看修改人.修改时间.修改内容…… 分支管理:开发团队在工作过程中多条产品线同 ...

  7. win10 linux 子系统 所在 目录

    C:\Users\用户名\AppData\Local\Packages\CanonicalGroupLimited.UbuntuonWindows_79rhkp1fndgsc\LocalState\r ...

  8. 2.pandas数据清洗

    pandas是用于数据清洗的库,安装配置pandas需要配置许多依赖的库,而且安装十分麻烦. 解决方法:可以用Anaconda为开发环境,Anaconda内置了许多有关数据清洗和算法的库. 1.安装p ...

  9. 10 dict嵌套与升级

    dic = { 'name':['alex','wusir','taibai'], 'py9':{ ', 'learm_money':19800, 'addr':'CBD', }, 'age':21 ...

  10. <记录>TP5 关联模型使用(嵌套关联、动态排序以及隐藏字段)

    在数据库设计中,常常会有如下这种关联模型,分类表中一条分类对应多个商品表中的商品 如果要获得分类表中每条分类 以及 对应的商品的信息,则需要先查询分类表中的数据,然后根据结果遍历查询商品表,最后把数据 ...