利用jQuery插件uploadPreview實現圖片上傳以及validate表單驗證示例詳解

Reducto 發布于2019-08-30 15:53 / 2831人閱讀

摘要：首先給大家介紹我之前遇到的問題，傳統的圖片上傳展示和防止網頁的跳轉，大佬們都懂，但是在這里我想簡單的寫一下我的經歷。下次是截圖僅供參考或者是這樣有其他參數的驗證具體的詳細參數的一些問題，請參考其他網站。

首先給大家介紹我之前遇到的問題，傳統的圖片上傳、展示和防止網頁的跳轉，大佬們都懂，但是在這里我想簡單的寫一下我的經歷。僅供小白參考。

引入jquery之后，在引入以下的js，我會簡單介紹以下，后續有詳細的講解：

   //這是圖片展示的插件
   //這是防止form提交跳轉的插件
   //這是表單提交

html代碼：

       
           圖片大小不超過2M，支持png、jpg、bmp格式。
                   
                   //這是上傳圖片的input框，你可以改邊樣式讓其隱藏在你需要點擊上傳的地方

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("上傳失敗")
           }
       }
   });
  }
}

其他設置
事例圖片如下

1.有一個默認的圖片

 2.點擊上傳圖片按鈕并選擇其中一個

 3.打開

 4.點擊上傳圖片成功

5. 其他注意事項

1.對圖片還進行寬高等其他參數設置，請參考其他網站
2.上傳圖片也可以進行對大小的限制，比如是2M以下的設置。下次是截圖僅供參考

   3.或者是這樣有其他參數的驗證

   4.具體的詳細參數的一些問題，請參考其他網站。

6. 說明

請大家多多提出意見，我會一一解答，謝謝。

GPU云服務器云服務器 validate表單驗證 jquery表單插件 jQuery圖片插件 jquery_form驗證插件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116739.html

利用jQuery插件uploadPreview實現圖片上傳以及validate表單驗證示例詳解

摘要：首先給大家介紹我之前遇到的問題，傳統的圖片上傳展示和防止網頁的跳轉，大佬們都懂，但是在這里我想簡單的寫一下我的經歷。下次是截圖僅供參考或者是這樣有其他參數的驗證具體的詳細參數的一些問題，請參考其他網站。首先給大家介紹我之前遇到的問題，傳統的圖片上傳、展示和防止網頁的跳轉，大佬們都懂，但是在這里我想簡單的寫一下我的經歷。僅供小白參考。引入jquery之后，在引入以下的js，我會簡...

The question 2019-08-22 18:13 評論0 收藏0
利用jQuery插件uploadPreview實現圖片上傳以及validate表單驗證示例詳解

摘要：首先給大家介紹我之前遇到的問題，傳統的圖片上傳展示和防止網頁的跳轉，大佬們都懂，但是在這里我想簡單的寫一下我的經歷。下次是截圖僅供參考或者是這樣有其他參數的驗證具體的詳細參數的一些問題，請參考其他網站。首先給大家介紹我之前遇到的問題，傳統的圖片上傳、展示和防止網頁的跳轉，大佬們都懂，但是在這里我想簡單的寫一下我的經歷。僅供小白參考。引入jquery之后，在引入以下的js，我會簡...

Darkgel 2019-08-02 10:46 評論0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：轉載來源包管理器管理著庫，并提供讀取和打包它們的工具。能構建更好應用的客戶端包管理器。一個整合和的最佳思想，使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數據。轉載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。?npm – npm 是 javasc...

netmou 2019-08-23 12:28 評論0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：轉載來源包管理器管理著庫，并提供讀取和打包它們的工具。能構建更好應用的客戶端包管理器。一個整合和的最佳思想，使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數據。轉載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。?npm – npm 是 javasc...

Hydrogen 2019-08-02 11:46 評論0 收藏0