jquery 实现图片上传，并在前端显示出来
目前遇到一个图片上上传的需求，突然发现，原来之前都没有做过此种类型的需求,以下是需求样式：
看到需求后之所以有点懵，是因为我接触到的文件上传，一般都是按钮类型的，例如以下这种：
深呼吸，好好想一下，整理整理思路：
1.需要有一个虚线框，这里为一个div元素
2.再有一个十字框（和文字说明一起，可以集成组合为一张图片），这里可以可以为一个img元素，这样：当没有上传图片时，显示默认图片，当上传了，显示上传的图片
3.要实现点击能够上传，需要有一个 input 元素：首先input元素不能显示出来，初步想了一下，有两种实现方法，一种是使用 label标签 加input元素（label 标签关联input,input影藏，label设置为与div 同样大小），另一种是使用input单标签，设置它的z-index层级在最上层，然后设置为行块元素即与div一般大小，然后设置input的 opacity 为0，即透明状态；
4.需要可以删除图片，那就在div里再加一个span 元素，点击span元素时，删除图片
得到以下html:
<div class="chuans">
<img src="__INDEX__/img/ins/chuanzhenm.png" alt="" data-imgsrc="__INDEX__/img/ins/chuanzhenm.png">
<input class="uploadImg file1" type="file" name="file1" >
<span class="delx Hui-iconfont"></span>
</div>
全部html如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="__INDEX__/css/header2.css">
<link rel="stylesheet" href="__INDEX__/css/1.0.8/iconfont.css">
<link rel="stylesheet" href="__INDEX__/css/ins/insinfo.css">
<script src="__INDEX__/js/common/jquery-1.7.2.min.js"></script>
<script src="__INDEX__/js/layer.js"></script>
<script src="__INDEX__/js/ins/insinfo.js"></script>
<title></title> </head>
<body>
{include file="common/header1"}
<div class="insbox">
<h3 class="institle"><span class="isnnei">提交商业投保资料</span> </h3>
<div class="nelist">
<ul class="inul yilei clearfix">
<div class="toleft"><span class="nming maohaos toyilei">手机号</span></div>
<div class="toright"><input type="text" class="xiangton shoujihao" name="shoujihao"></div>
</ul>
<ul class="inul yilei clearfix">
<div class="toleft"><span class="nming maohaos toyilei">发动机号</span></div>
<div class="toright"><input type="text" class="xiangton fadongjihao" name="fadongjihao"></div>
</ul>
<ul class="inul yilei clearfix">
<div class="toleft"><span class="nming maohaos toyilei">车架号</span></div>
<div class="toright"><input type="text" class="xiangton chejiahao" name="chejiahao"></div>
</ul>
<ul class="inul erlei clearfix">
<div class="toleft"><span class="nming maohaos toerlei">身份证正反面</span></div>
<div class="toright clearfix">
<div class="chuans"> <img src="__INDEX__/img/ins/chuanzhenm.png" alt="" data-imgsrc="__INDEX__/img/ins/chuanzhenm.png">
<input class="uploadImg file1" type="file" name="file1" >
<span class="delx Hui-iconfont"></span>
</div>
<div class="shangshili clearfix">
<div class="shuom">示例</div>
<div class="shulitu">
<img src="__INDEX__/img/ins/shilizhen.png" alt="" data-imgsrc="__INDEX__/img/ins/shilizhen.png">
</div>
</div>
</div>
</ul>
<ul class="inul erlei clearfix">
<div class="toleft"><span class="nming "></span></div>
<div class="toright clearfix">
<div class="chuans"> <img src="__INDEX__/img/ins/chuanfanmian.png" data-imgsrc="__INDEX__/img/ins/chuanfanmian.png" alt="">
<input class="uploadImg file2" type="file" name="file2" >
<span class="delx Hui-iconfont"></span>
</div>
<div class="shangshili clearfix">
<div class="shuom">示例</div>
<div class="shulitu">
<img src="__INDEX__/img/ins/shilifan.png " alt="">
</div>
</div>
</div>
</ul>
<ul class="inul erlei clearfix">
<div class="toleft"><span class="nming maohaos toerlei">自拍照</span></div>
<div class="toright clearfix">
<div class="chuans"> <img src="__INDEX__/img/ins/dianchuan.png" data-imgsrc="__INDEX__/img/ins/dianchuan.png" alt="">
<input class="uploadImg file3" type="file" name="file3" >
<span class="delx Hui-iconfont"></span>
</div>
<div class="shangshili clearfix">
<div class="shuom"><span class="kanshili"><span class="chsa Hui-iconfont"></span>查看示例</span></div>
<div class="shulitu"></div>
</div>
</div>
</ul> </div> <div class="btns">
<span class="tibtn">确定</span>
</div>
</div>
<script>
var otijiourl = "{:url('insorder/submitInsInfo')}";
</script>
</body>
</html>
根据以上的规则设置css样式：
.insbox{
width:1200px;
position:relative;
margin:0 auto;
border:1px solid #333;
color:#333;
border-radius: 20px;
margin-bottom:150px;
}
.inul {
min-height:44px;
margin:20px 0;
}
ul.inul>div{
float:left;
}
h3.institle{
background:#333;
color:#fff;
text-align: center;
height:78px;
border-top-left-radius:20px;
border-top-right-radius:20px;
position:relative;
width:100%;
display:flex;
align-items: center;
justify-content:center;
}
.isnnei{
background:url(../../img/ins/card.png)no-repeat 0 center;
background-size: 50px auto;
}
h3.institle span{
padding-left: 58px;
font-size: 22px;
letter-spacing: 3px;
font-weight: normal;
}
.toleft{
width:25%;
text-align: right;
}
.toright{
width:75%;
}
input.xiangton{
border:1px solid #eee;
border-radius: 3px;
width:290px;
height:42px;
text-indent: 10px;
}
.toyilei{
line-height:44px;
}
span.nming {
margin-right:40px;
position:relative;
}
.maohaos::after{
content:":";
display:inline;
position:absolute;
right:;
right:-10px;
}
.erlei{
height:172px;
line-height:172px;
}
div.toright>div{
float:left;
}
div.chuans{
position:relative;
width:240px;
height:160px;
border-radius: 3px;
border:1px dashed #ccc;
margin-right: 44px;
overflow: hidden;
}
div.chuans img{
position:absolute;
max-width:238px;
left:;
right:;
top:;
bottom:;
margin:auto;
}
div.shangshili>div{
float:left;
}
div.shangshili {
height:160px;
position:relative;
}
div.shuom{
margin-right:10px;
}
div.shulitu{
width:242px;
height:100%;
position:relative;
}
div.shulitu img{
position:absolute;
max-width:240px;
left:;right:;
top:;bottom:;
margin:auto;
}
div.btns{
margin-top:180px;
margin-bottom:40px;
position:relative;
text-align: center;
}
span.tibtn{
padding:8px 30px;
background:#333;
border-radius: 5px;
color:#fff;
}
div.chuans{
line-height:30px;
}
input.uploadImg{
display: inline-block;
width: 100%;
height: 100%;
opacity:;
z-index:;
}
span.delx {
position:absolute;
top:5px;
right:5px;
z-index:;
font-size: 30px;
float:right;
display:none;
border-radius: 50%;
}
span.delx:hover{
background:#333;
color:#fff;
cursor:pointer;
}
div.shuom span.chsa {
color:#e5000c;
margin-right:10px;
font-size: 20px;
font-weight: normal;
}
div.shuom{
color:#1f5fc3;
font-size: 14px;
font-weight: bold;
}
得到如下的样式：
下面开始写js:
首先需要判断上传的图片格式，如果不是jpeg,jpg,png,bmp,则提示图片上传格式错误，需重新上传；如果格式正确，那就或者上传图片的地址，把当前div 下 img 的src 设置为此图片地址，即可达到显示图片的目的
$("body").on("change","div.chuans input.uploadImg",function(){
var reads = new FileReader();
var f = $(this).get(0).files[0];
var rep = /jpeg|png|gif|bmp/ig;
var gstyle = f.type.split("/")[1];
if(rep.test(gstyle)){
reads.readAsDataURL(f);
var that = this;
reads.onload = function(e) {
$(that).parent().find("img").attr("src",this.result)
};
}else{
layer.msg("图片格式不正确，请上传 jpeg|png|gif|bmp 格式的图片")
}
});
以下是删除图片：
$("body").on("click","span.delx",function(){
var odatasrc = $(this).parents(".chuans").find("img").data("imgsrc");
var osrc = $(this).parents(".chuans").find("img").attr("src");
$(this).parents(".chuans").find("img").attr("src",odatasrc);
$(this).hide();
$(this).parents(".chuans").find("input").val("");
});
图片上传时，这里突然遇到一个报错:
这个错误找了好久，都没有发现是哪里出了问题，代码是这样的：
$.ajax({
type:"post",
url:otijiourl,
data:odata,
dataType: 'json', //返回值类型 一般设置为json
success:function(res){
console.log(res);
},error:function(){
console.log("后台处理错误");
}
})
看了半天，也没有发现是哪里错了
最后百度了一下，发现别人也遇到了这样的问题，原因是使用 jquery ajax 发送请求的时候，会默认把data中的数据进行序列化。只要不进行序列化，就可以了。如果不进行序列化，需要增加一个参数：processData，设置为 false
变更之后的ajax 请求代码如下：
$.ajax({
type:"post",
url:otijiourl,
data:odata,
dataType: 'json', //返回值类型 一般设置为json
processData: false, // jQuery不要去处理发送的数据
success:function(res){
console.log(res);
},error:function(){
console.log("后台处理错误");
}
})
改完之后就ok 了
全部js 代码如下：大功告成
$(function(){
$("body").on("change","div.chuans input.uploadImg",function(){
var reads = new FileReader();
var f = $(this).get(0).files[0];
var rep = /jpeg|png|gif|bmp/ig;
var gstyle = f.type.split("/")[1];
if(rep.test(gstyle)){
reads.readAsDataURL(f);
var that = this;
reads.onload = function(e) {
$(that).parent().find("img").attr("src",this.result)
};
}else{
layer.msg("图片格式不正确，请上传 jpeg|png|gif|bmp 格式的图片")
}
});
$("body").on("mouseenter","div.chuans",function(){
var odatasrc = $(this).find("img").data("imgsrc");
var osrc = $(this).find("img").attr("src");
if(osrc.indexOf(odatasrc)==-1){
$(this).find("span.delx").show();
}
});
$("body").on("mouseleave","div.chuans",function(){
$(this).find("span.delx").hide();
});
$("body").on("click","span.delx",function(){
var odatasrc = $(this).parents(".chuans").find("img").data("imgsrc");
var osrc = $(this).parents(".chuans").find("img").attr("src");
$(this).parents(".chuans").find("img").attr("src",odatasrc);
$(this).hide();
$(this).parents(".chuans").find("input").val("");
});
$("body").on("click","span.tibtn",function(){
var odata = getchuancan();
console.log(odata);
if(jiancecanshu()){
$.ajax({
type:"post",
url:otijiourl,
data:odata,
dataType: 'json', //返回值类型 一般设置为json
// contentType: "application/x-www-form-urlencoded; charset=utf-8",
processData: false, // jQuery不要去处理发送的数据
success:function(res){
console.log(res);
},error:function(){
console.log("后台处理错误");
}
})
}
});
function getchuancan(){
var formData = new FormData();
var ojson = {};
ojson.oshouji =$.trim( $("input.shoujihao").val());
ojson.ofdji = $("input.fadongjihao").val();
ojson.ochjiah = $("input.chejiahao").val();
// ojson.ozhenm = $("input.file1").get(0).files[0];
// ojson.opfanm = $("input.file2").get(0).files[0];
// ojson.oshilm = $("input.file3").get(0).files[0];
ojson.ozhenm = document.querySelector("input.file1").files[0];
ojson.opfanm = document.querySelector("input.file2").files[0];
ojson.oshilm = document.querySelector("input.file3").files[0];
formData.append('oshouji', ojson.oshouji);
formData.append('ofdji', ojson.ofdji);
formData.append('ochjiah', ojson.ochjiah);
formData.append('ozhenm', ojson.ozhenm);
formData.append('opfanm', ojson.opfanm);
formData.append('oshilm', ojson.oshilm);
return ojson;
return formData;
}
function jiancecanshu(){
var oshouji = $.trim($("input.shoujihao").val());
var ofdji = $("input.fadongjihao").val();
var ochjiah = $("input.chejiahao").val();
var ozhenm = $("input.file1").val();
var opfanm = $("input.file2").val();
var oshilm = $("input.file3").val();
var ocan = 100;
var canarr = [0,1,2,3,4,5,6];
if(oshouji.length==0){
ocan=0;
}else if(ofdji.length==0){
ocan=1;
}else if(ochjiah.length==0){
ocan=2;
}else if(ozhenm.length==0){
ocan=3;
}else if(opfanm.length==0){
ocan=4;
}else if(oshilm.length==0){
ocan=5;
}else if(!isPhone(oshouji)){
ocan=6;
}
var arr=[
"手机号为空，请输入手机号",
"发动机号为空，请输入发动机号",
"车架号为空，请输入车架号",
"身份证正面照为空，请输入身份证正面照",
"身份证反面照为空，请输入身份证反面照",
"自拍照为空，请输入自拍照",
"手机号输入错误，请输入正确的手机号"
];
if(canarr.indexOf(ocan)!=-1){
console.log("ocan: "+ocan);
console.log(arr);
layer.msg(arr[ocan]);
return false;
}else{
return true;
}
}
//检测手机号码
function isPhone(phone) {
if (phone == null || phone == '') {
// layer.msg('请填写手机号码');
return false;
}
//验证号码
var phoneReg = /(^1[3|4|5|7|8|9]\d{9}$)|(^09\d{8}$)/ig;
if (!phoneReg.test(phone)) {
// layer.msg('请填写正确的手机号码');
return false;
} else {
return true;
}
};
})
得到的图片上传如下：
备注：之所以一开始有点懵，是因为对需求没有明确分析，认真分析之后，会发现其实都是些比较简单而且容易的功能。认真分析之后，才能把东西做出来
jquery 实现图片上传，并在前端显示出来的更多相关文章
- Jquery自定义图片上传插件
1 概述 编写后台网站程序大多数用到文件上传,可是传统的文件上传控件不是外观不够优雅,就是性能不太好看,翻阅众多文件上传控件的文章,发现可以这样去定义一个文件上传控件,实现的文件上传的效果图如下: 2 ...
- jquery实现图片上传前本地预览
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
- jquery之图片上传
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- jQuery plugins 图片上传
http://plugins.jquery.com/ 用到一下插件: magnific popup 看大图 jQuery File Upload 多文件上传 jQuery Rotate 图片旋转 gi ...
- ThinkPHP5与JQuery实现图片上传和预览效果
内容正文 这篇文章主要为大家详细介绍了thinkphp上传图片功能,和jquery预览图片效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 先上效果图: html和js代码如下: <!DO ...
- 基于jquery实现图片上传本地预览功能
一.原理 分为两步: 当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL),把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来.在这里,我们需 ...
- JQuery实现 图片上传
用到的文件,我都已经打包好了,自行下载: https://files.cnblogs.com/files/lguow/lib.rar 核心代码如下: <input type="hidd ...
- jquery实现图片上传前本地预览功能
HTML <img id="pic" src="" > <input id="upload" name="fil ...
- jquery实现图片上传前的预览
html代码 <div id="uploadPreview"></div> <input id="uploadImage" typ ...
随机推荐
- 全网唯一的纯前端实现的canvas支持多图压缩并打包下载的工具
技术栈: canvas jszip.js(网页端压缩解压缩插件JSZIP库) FileSaver.js(文件保存到本地库) 直接解读源码: <div class="cont" ...
- Azkaban —— 编译及部署
一.Azkaban 源码编译 1.1 下载并解压 Azkaban 在3.0版本之后就不提供对应的安装包,需要自己下载源码进行编译. 下载所需版本的源码,Azkaban的源码托管在GitHub上,地址为 ...
- Spark学习之路（一）—— Spark简介
一.简介 Spark于2009年诞生于加州大学伯克利分校AMPLab,2013年被捐赠给Apache软件基金会,2014年2月成为Apache的顶级项目.相对于MapReduce的批处理计算,Spar ...
- Kafka 学习之路（一）—— Kafka简介
一.简介 Apache Kafka是一个分布式的流处理平台.它具有以下特点: 支持消息的发布和订阅,类似于RabbtMQ.ActiveMQ等消息队列: 支持数据实时处理: 能保证消息的可靠性投递: 支 ...
- Lombok简介及入门使用 （转载）
Lombok简介及入门使用 lombok既是一个IDE插件,也是一个项目要依赖的jar包. Intellij idea开发的话需要安装Lombok plugin,同时设置 Setting -> ...
- java创建对象的方式
Java中创建对象的5种方式 作为Java开发者,我们每天创建很多对象,但我们通常使用依赖管理系统,比如Spring去创建对象.然而这里有很多创建对象的方法,我们会在这篇文章中学到. Java中有5种 ...
- 还在被大妈灵魂拷问？使用Python轻松完成垃圾分类！
目录 0 环境 1 引言 2 思路 3 图像分类 4 总结 0 环境 Python版本:3.6.8 系统版本:macOS Mojave Python Jupyter Notebook 1 引言 七月了 ...
- sql语句的注意点
select * from CallRecords where CallerNumber=001 and TelNum=02088888881 or id=1; 如果 CallerNumber=0 ...
- java虚拟机-GC-调优
1. 年轻代大小选择 * 响应时间优先的应用:尽可能设大,直到接近系统的最低响应时间限制(根据实际情况选择).在此种情况下,年轻代收集发生的频率也是最小的.同时,减少到达年老代的对象. * 吞吐量优先 ...
- BZOJ 2039：[2009国家集训队]employ人员雇佣（最小割）
http://www.lydsy.com/JudgeOnline/problem.php?id=2039 题意:中文题意. 思路:一开始想着和之前做的最大权闭合图有点像,但是如果把边全部当成点的话,那 ...