前端js图片上传
前端js图片上传,原理用input type="file"获取图片然后把图片转换成base64编码传到后台.
图片上传
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title></title> </head> <body>
<!--header-->
<div class="header">
<i class="header-calendar" id="return"></i>
<h3><span>个人资料</span></h3>
</div>
<form>
<ul class="tab-nav">
</ul>
<div class="form-btn">
<input id="files" type="file" onchange="previewImage(this, 'prvid')" >
<div id="prvid" class="prvid"></div>
</div>
</form>
<script>
var user_img; //图片 //把图片转成base64
function previewImage(file, prvid) {
/* file:file控件
* prvid: 图片预览容器
*/
var tip = "Expect jpg or png or gif!"; // 设定提示信息
var filters = {
"jpeg": "/9j/4",
"gif": "R0lGOD",
"png": "iVBORw"
}
var prvbox = document.getElementById(prvid);
prvbox.innerHTML = "";
if(window.FileReader) { // html5方案
for(var i = 0, f; f = file.files[i]; i++) {
var fr = new FileReader();
fr.onload = function(e) {
var src = e.target.result;
if(!validateImg(src)) {
//alert(tip);
alert('图片格式错误');
} else {
alert(src);
showPrvImg(src);
}
}
fr.readAsDataURL(f);
}
} else { // 降级处理 if(!/\.jpg$|\.png$|\.gif$/i.test(file.value)) {
//alert(tip);
mui.toast('图片格式错误');
} else {
showPrvImg(file.value);
}
} function validateImg(data) {
var pos = data.indexOf(",") + 1;
for(var e in filters) {
if(data.indexOf(filters[e]) === pos) {
return e;
}
}
return null;
}
//图片
function showPrvImg(src) {
var img = document.createElement("img");
img.src = src;
prvbox.appendChild(img);
user_img = src //向后台传输的图片
}
} </script> </body> </html>
前端js图片上传的更多相关文章
- 兼容好的JS图片上传预览代码
转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...
- JS图片上传预览插件制作(兼容到IE6)
其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方 ...
- 微信JS图片上传与下载功能--微信JS系列文章(三)
概述 在前面的文章微信JS初始化-- 微信JS系列文章(一)中已经介绍了微信JS初始化的相关工作,接下来本文继续就微信JS的图片上传功能进行描述,供大家参考. 图片上传 $(function(){ v ...
- js图片上传 的方法
先规划出框架 <div id="AQA" style="width:300px; height:200px; background-color:aquamarine ...
- js 图片上传
可能很多不熟悉的图片上传的同学会觉得有点懵,其实做过一次你就会发现特别的简单. 只是一个formData格式的表单提交,把地址写到 action = "" 里面就可以了,当然你可以 ...
- 一个node.js图片上传显示小应用
文件结构如下: 实现的功能有: 可以通过浏览器使用. 当请求http://domain/start时,可以看到一个欢迎页面,页面上有一个文件上传的表单. 用户可以选择一个图片并提交表单,随后文件将被上 ...
- 前端实现图片上传预览并转换base64
前端实现文件的上传,就必须用到input标签,type属性为file. 在vue项目中通ref操作dom.input有一个属性accept,是必须要搭配type=file使用. multiple可以上 ...
- node.js图片上传
1.node-formidable 对文件上传提供帮助的组件 2.app.js var formidable = require('formidable'); var http = require( ...
- 前端js webuploader上传(导入)excel文件
项目开发中用到导入(上传)Excel文件 我使用的是百度的webuploader: 1:下载:http://fex.baidu.com/webuploader/(官方下载/示例) 2:使用Web Up ...
随机推荐
- 【扩展GCD】荒岛野人
题目 [题目描述] 克里特岛以野人群居而著称.岛上有排列成环行的M个山洞.这些山洞顺时针编号为1,2,-,M.岛上住着N个野人,一开始依次住在山洞C1,C2,-,CN中,以后每年,第i个野人会沿顺时针 ...
- 笛卡尔树--牛客第四场(sequence)
思路: O(n)建一颗笛卡尔树,再O(n)dfs向上合并答案就行了. #define IOS ios_base::sync_with_stdio(0); cin.tie(0); #include &l ...
- 配置Mysql远程连接
一.赋予某个用户权限 1.赋予权限格式:grant 权限 on 数据库对象 to 用户@IP(或者相应正则) 注:可以赋予select,delete,update,insert,index等权限精确到 ...
- 07 MySQL之索引原理
一.介绍 为什么有索引:使用索引可快速访问数据库表中的特定信息.索引是对数据库表中一列或多列的值进行排序的一种结构. 作用: 1. 快速查询数据 2. 保证数据的唯一性 3 ...
- IT经理工作职责
IT经理工作职责: 1. 管理公司信息技术以及计算机系统. 2. 确保公司信息技术是可访问的并且配备了现有的可用的硬件和软件. 3. 监控并且维护公司信息技术并确保能够得到最大化的使用 ...
- shell中数字大小的比较
[整数之间的比较] 示例脚本: #!/bin/bash if [ $1 -gt $2 ] then echo "参数$1大于参数$2" else echo "参数$1小于 ...
- QT 给工程添加图片
先打开如图的打开方式 然后我们看到以下的画面,选择下面的 然后我们选择如下:,这里我们要注意我们的图片资源有一定要和QRC资源在同一个文件夹中 之后我们通过在stylesheet里面设置来使用我们添加 ...
- Linux SUID SGID SBIT 简介和权限设定
SUID :Set UID 1 SUID 权限仅对二进制程序(binary program)有效 2 执行者对于该程序需要具有x的可执行权限 3 本权限仅在执行该程序的过程中有效(run-time) ...
- linux系统很卡的基本排查方法
1. 查看内存使用情况 free -g 当观察到free栏已为0的时候,表示内存基本被吃完了,那就释放内存吧(释放内存参考上篇文章) 2. 查看磁盘使用情况 df -h 当发现磁盘使用率很高时,那就要 ...
- docker 创建容器时指定容器ip
Docker创建容器时默认采用bridge网络,自行分配ip,不允许自己指定. 在实际部署中,我们需要指定容器ip,不允许其自行分配ip,尤其是搭建集群时,固定ip是必须的. 我们可以创建自己的bri ...