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

請你們多多提出意見，我會一一解答，謝謝。