利用jQuery插件uploadPreview实现图片上传以及validate表单验证示例详解

首先给大家介绍我之前遇到的问题，传统的图片上传、展示和防止网页的跳转，大佬们都懂，但是在这里我想简单的写一下我的经历。仅供小白参考。

1. 引入jquery之后，在引入以下的js，我会简单介绍以下，后续有详细的讲解：

      <script src="/resources/js/uploadPreview.js"></script>//这是图片展示的插件
      <script src="/resources/js/jquery.form.js" type="text/javascript"></script>//这是防止form提交跳转的插件
      <script src="/resources/sky-form/js/jquery.validate.min.js"></script>//这是表单提交
   

2. html代码：

          <form action="//需要上传的路径" method="post" id="CodeId" enctype="multipart/form-data">
              <div class="photo-title">图片大小不超过2M，支持png、jpg、bmp格式。</div>
                      <img src="//这是预留图片展示的地方" id="codeImg" />
                      <input type="file" name="holdingCard" id="Codeinput" value="" />//这是上传图片的input框，你可以改边样式让其隐藏在你需要点击上传的地方                     
              </div>
              <button class="medio-btn">上传图片</button>
          </form>
          
   

3. js代码：

   $("#Codeinput").uploadPreview({//这是图片上传的代码
     Img: "codeImg",//预留展示img的id
     ImgType: ["jpg", "bmp", "png"],//图片的格式
     Callback: function() {
     //成功展示后的回调函数
     }
   });
   $(".medio-btn").click(function() {//点击执行的函数
         initValidate()//点击执行的函数
   })
   // 初始化表单验证
   function initValidate() {
      if($('#Codeinput').val() == '') {//判断input框中是否有图片
          alert("请上传图片")
      } else {
          $('#CodeId').ajaxSubmit({
             success: function(data) {//成功上传的回调函数
              if(data.success) {//判断后台返回值
                  alert("上传成功")
              } else {
                  alert("上传失败")
              }
          }
      });
     }
   }
   

4. 其他设置
   事例图片如下

   1.有一个默认的图片

 2.点击上传图片按钮并选择其中一个

 3.打开

 4.点击上传图片成功

5. 其他注意事项

1.对图片还进行宽高等其他参数设置，请参考其他网站
2.上传图片也可以进行对大小的限制，比如是2M以下的设置。下次是截图仅供参考

   3.或者是这样有其他参数的验证

   4.具体的详细参数的一些问题，请参考其他网站。

6. 说明

请大家多多提出意见，我会一一解答，谢谢。