目前遇到一个图片上上传的需求，突然发现，原来之前都没有做过此种类型的需求,以下是需求样式：

看到需求后之所以有点懵，是因为我接触到的文件上传，一般都是按钮类型的，例如以下这种：

深呼吸，好好想一下，整理整理思路：

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 实现图片上传，并在前端显示出来的更多相关文章

  1. Jquery自定义图片上传插件

    1 概述 编写后台网站程序大多数用到文件上传,可是传统的文件上传控件不是外观不够优雅,就是性能不太好看,翻阅众多文件上传控件的文章,发现可以这样去定义一个文件上传控件,实现的文件上传的效果图如下: 2 ...

  2. jquery实现图片上传前本地预览

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  3. jquery之图片上传

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  4. jQuery plugins 图片上传

    http://plugins.jquery.com/ 用到一下插件: magnific popup 看大图 jQuery File Upload 多文件上传 jQuery Rotate 图片旋转 gi ...

  5. ThinkPHP5与JQuery实现图片上传和预览效果

    内容正文 这篇文章主要为大家详细介绍了thinkphp上传图片功能,和jquery预览图片效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 先上效果图: html和js代码如下: <!DO ...

  6. 基于jquery实现图片上传本地预览功能

    一.原理 分为两步: 当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL),把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来.在这里,我们需 ...

  7. JQuery实现 图片上传

    用到的文件,我都已经打包好了,自行下载: https://files.cnblogs.com/files/lguow/lib.rar 核心代码如下: <input type="hidd ...

  8. jquery实现图片上传前本地预览功能

    HTML <img id="pic" src="" > <input id="upload" name="fil ...

  9. jquery实现图片上传前的预览

    html代码 <div id="uploadPreview"></div> <input id="uploadImage" typ ...

随机推荐

  1. vue-resource.js的get和post的正确用法

    在网上看到人家写的vue-resource.js的get方法例子, new Vue({ el:'body', data:{ }, methods:{ get:function(){ this.$htt ...

  2. .NET Core 3.0之深入源码理解Kestrel的集成与应用(一)

      写在前面 ASP.NET Core 的 Web 服务器默认采用Kestrel,这是一个基于libuv(一个跨平台的基于Node.js异步I/O库)的跨平台.轻量级的Web服务器. 在开始之前,先回 ...

  3. MyBatis 源码分析

    MyBatis 运行过程 传统的 JDBC 编程查询数据库的代码和过程总结. 加载驱动. 创建连接,Connection 对象. 根据 Connection 创建 Statement 或者 Prepa ...

  4. Spring 之Aop实现日志记录

    Aop实现见代码,简单demo实现 package com.idcos.automate.config; import com.idcos.automate.dal.auto.dao.dcos.Dco ...

  5. Android之LinearLayout布局下怎么让按钮固定在底部

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  6. Vue SSR初探

    因为之前用nuxt开发过应用程序,但是nuxt早就达到了开箱即用的目的,所以一直对vue ssr的具体实现存在好奇. 构建步骤 我们通过上图可以看到,vue ssr 也是离不开 webpack 的打包 ...

  7. Spring Boot使用MyBatis Generator、Swagger

    MyBatis是Java目前主流的ORM框架,在Spring Boot中使用MyBatis可以参考这篇文章:http://www.ityouknow.com/springboot/2016/11/06 ...

  8. 前端Web浏览器基于Flash如何实时播放监控视频画面（一）之获取监控摄像头的RTSP流

    本片文章只是起到抛砖引玉的作用,能从头到尾走通就行,并不做深入研究.为了让文章通俗易懂,尽量使用白话描述. 0x001: 获取 现在市场上普见的摄像头都支持RTSP协议,如果你不懂什么是RTSP协议, ...

  9. 玩转SpringBoot之整合Mybatis拦截器对数据库水平分表

    利用Mybatis拦截器对数据库水平分表 需求描述 当数据量比较多时,放在一个表中的时候会影响查询效率:或者数据的时效性只是当月有效的时候:这时我们就会涉及到数据库的分表操作了.当然,你也可以使用比较 ...

  10. 大话Spark(9)-源码之TaskScheduler

    上篇文章讲到DAGScheduler会把job划分为多个Stage,每个Stage中都会创建一批Task,然后把Task封装为TaskSet提交到TaskScheduler. 这里我们来一起看下Tas ...