利用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. 说明

请你们多多提出意见，我会一一解答，谢谢。