简单的做一个图片上传预览(web前端)
在做web项目很多的时候图片都是避免不了的,所以操作图片就成了一个相对比较棘手的问题,其实也不是说很麻烦,只是说上传然后直接预览的过程很恶心,今天简单的做一个处理。
效果预览:
<!DOCTYPE html>
<html>
<head>
<title>HTML5上传图片预览</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<h3>请选择图片文件:JPG/GIF</h3>
<form name="form0" id="form0">
<input type="file" name="file0" id="file0" multiple="multiple" /><br>
<img src="" id="img0" style="width: 20rem;height: 15rem;">
</form>
<script>
$("#file0").change(function(){
var objUrl = getObjectURL(this.files[0]) ;//获取文件信息
console.log("objUrl = "+objUrl);
if (objUrl) {
$("#img0").attr("src", objUrl);
}
}) ;
function getObjectURL(file) {
var url = null;
if (window.createObjectURL!=undefined) {
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 ;
}
</script>
</body>
</html>
简单的做一个图片上传预览(web前端)的更多相关文章
- VUE2.0+VUE-Router做一个图片上传预览的组件
之前发了一篇关于自己看待前端组件化的文章,但是由于学习和实践的业务逻辑差异,所以自己练习的一些demo逻辑比较简单,打算用vue重构现在公司做的项目,所以在一些小的功能页面上使用vue来做的,现在写的 ...
- ___简单的MVC单个图片上传预览
js: $("#btnImg").click(function () { $("#form0").ajaxSubmit({ url: "/Studen ...
- ASP.NET工作笔记之一:图片上传预览及无刷新上传
转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...
- js实现图片上传预览及进度条
原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...
- 用html5文件api实现移动端图片上传&预览效果
想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象 Blob表示原始二进制数据,Html5的file对象就继 ...
- 模拟QQ心情图片上传预览
出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...
- signup图片上传预览经常总结
html <html> <head> <meta charset="utf-8" /> <meta http-equiv="X- ...
- 兼容好的JS图片上传预览代码
转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...
- [前端 4] 使用Js实现图片上传预览
导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...
随机推荐
- shell编程 之 函数
1 函数基本格式 个人认为,编程中的函数基本上有3种,第一种是糖葫芦函数,一根棒棒串起来,执行一次就是走个过场,吃完了糖葫芦就没别的事了,第一种基本就是这样的: 它没有参数,没有返回值. demoFu ...
- 机器学习超参数优化算法-Hyperband
参考文献:Hyperband: Bandit-Based Configuration Evaluation for Hyperparameter Optimization I. 传统优化算法 机器学习 ...
- 第二节,mnist手写字体识别
1.获取mnist数据集,得到正确的数据格式 mnist = input_data.read_data_sets('MNIST_data',one_hot=True) 2.定义网络大小:图片的大小是2 ...
- ZKClient操作zookeeper
前面简单研究了curator的使用,下面简单研究zkclient的使用. 1.创建连接 private static final String CONNECT_ADDR = "127.0.0 ...
- 困在栅栏里的恺撒WriteUp(附栅栏密码加密解密脚本)
题目地址:http://www.shiyanbar.com/ctf/1867 这道题目并不难,就是先用栅栏密码解密,然后再用恺撒密码解密就好. 1. 6代表了栅栏密码的栏数(说实话,一开始我也没看出来 ...
- bootstrap模态框显示时被遮罩层遮住了
<style>.modal-backdrop{z-index:0;}</style>
- 使用unix的time命令进行简单的计时
/usr/bin/time -p python3 1.py 需要注意这里使用的是/usr/bin/time 命令而不unix系统自带time. 输出 real 0.04 user 0.03 sys 0 ...
- atom 的使用插件
emmet # html补全minimap # 源码预览图linter # 语法检查file-icons # 文件图标docblockr # 注释块autoclose-html # 自动闭合html标 ...
- percona mysql server5.7基于gtid的主从复制
配置mysql基于gtid主从复制架构 一.二进制安装mysql [root@node5 data]# --Linux.x86_64.ssl101.tar.gz [root@node5 data]# ...
- zabbix-3.0.4添加对windows 2008r2的监控
zabbix-3.0.4添加对windows 2008r2的监控 一.windows客户端的配置关闭windows防火墙或者开通10050和10051端口(1).关闭防火墙(不推荐直接关闭,测试可以这 ...