getObjectURL 上传图片预览
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 上传图片预览的更多相关文章
- HTML5上传图片预览
<!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http ...
- JS 上传图片 + 预览功能(一)
JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...
- jquery实现上传图片预览(需要浏览器支持html5)
jquery实现上传图片预览(需要浏览器支持html5) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- HTML5上传图片预览功能
HTML5上传图片预览功能 HTML代码如下: <!-- date: 2018-04-27 14:41:35 author: 王召波 descride: HTML5上传图片预览功能 --> ...
- js兼容火狐显示上传图片预览效果
js兼容火狐显示上传图片预览效果[谷歌也适用] <!doctype html> <html> <head> <meta content="text/ ...
- 通过HTML5 FileReader实现上传图片预览功能
原文:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html 在上传图片到服务器之前,我们希望可以预览一下要上传的图片. ...
- 去除ckeditor上传图片预览中的英文字母
去除ckeditor上传图片预览中的英文字母 CKEDITOR.replace('text', { filebrowserImageUploadUrl : 'upload_img.do', langu ...
- HTML5 上传图片预览
html5出现之前如果需要上传图片预览 一般都是先上传到服务器然后远程预览 html5出现之后 有个filereader 解决了这问题 //选中图片之后 $("#fileAddPic&q ...
- JavaScript 中的FileReader对象(实现上传图片预览)
方法一:使用js的FileReader对象 1.FileReader对象简介 1.检测浏览器对FileReader的支持 if(window.FileReader) { var fr = new Fi ...
随机推荐
- 前端-JavaScript1-6——JavaScript之变量类型的转换
6.1 string → number 先来学习一个语句,这个语句和alert差不多,也是弹窗,弹的是输入框: 1 prompt("请输入你的电话","139&qu ...
- 网络之TCP握手总结
目录: 31.Tcp握手的一些问题? 21.Tcp三次握手及SYN攻击: 四次握手? 为什么建立连接是三次握手,而关闭连接却是四次挥手? 13.TCP释放连接四次握手 12.TCP建立连接三次握手 1 ...
- storj白皮书v3最全面解读,Docker创始人的加入能否扳倒AWS S3
Storj新发了白皮书v3,地址是:https://storj.io/storjv3.pdf. 这次白皮书一共有90页,看完还真要费不少时间.如果你没有时间看,可以看一下我这篇快速技术解读. 上次St ...
- 在pycharm_2018.2版本中开启Flask的debug的方法 (不要用命令:python **.py启动)
断点后,先ctl+c关闭控制台程序,再点击debuger调试 问题描述:在pycharm_2018.2版本中,我明确开启了debug,代码如下所示: from flask import Flask a ...
- 【待考察】Appium使用技巧,助你快速入门移动端自动化!
Appium使用技巧,助你快速入门移动端自动化! 原创: 柠檬班superman 柠檬班软件测试 1月4日 关注并置顶[柠檬班]的小哥哥小姐姐 “猪”年行大运 说说最近研究移动端的自动化 移动端的自动 ...
- 版本控制(svn、Git)环境创建
1.SVN 2.Git last 版本控制工具应该具备的功能: 协同修改: 数据备份: 版本管理: 权限控制: 历史记录:查看修改人.修改时间.修改内容…… 分支管理:开发团队在工作过程中多条产品线同 ...
- win10 linux 子系统 所在 目录
C:\Users\用户名\AppData\Local\Packages\CanonicalGroupLimited.UbuntuonWindows_79rhkp1fndgsc\LocalState\r ...
- 2.pandas数据清洗
pandas是用于数据清洗的库,安装配置pandas需要配置许多依赖的库,而且安装十分麻烦. 解决方法:可以用Anaconda为开发环境,Anaconda内置了许多有关数据清洗和算法的库. 1.安装p ...
- 10 dict嵌套与升级
dic = { 'name':['alex','wusir','taibai'], 'py9':{ ', 'learm_money':19800, 'addr':'CBD', }, 'age':21 ...
- <记录>TP5 关联模型使用(嵌套关联、动态排序以及隐藏字段)
在数据库设计中,常常会有如下这种关联模型,分类表中一条分类对应多个商品表中的商品 如果要获得分类表中每条分类 以及 对应的商品的信息,则需要先查询分类表中的数据,然后根据结果遍历查询商品表,最后把数据 ...