插件描述：支持圖片預覽、像素限制、大小限制、多圖上傳、更新模式下頁面初始化加載圖片

更新時間：2020-09-25?00:23:49

更新說明：添加? 刪除時，同時刪除服務器圖片的功能，文檔提供php實例。添加參數Url參數更新?{

ele:?"#cupload",?//?實例化的DOM對象,必需

name:?"image",?//?圖片input的name名,非必需,默認為image

num:?1,?//?可上傳圖片的數量,非必需,默認為1

url:?"./upload.php",?//?異步上傳url,非必需,無默認值

deleteUrl:?"./delete.php",?//?刪除url,刪除時同時刪除服務器圖片,不寫不刪，非必需,無默認值

width:?148,?//?預覽框的寬,單位為px,非必需,默認為148

height:?148,?//?預覽框的高,單位為px,非必需,默認為148

minSize:?1024,?//?圖片大小最小限制,單位為KB,非必需,無默認值

maxSize:?2048,?//?圖片大小最大限制,單位為KB,非必需,無默認值

limitedSize:?2048,?//?圖片大小要求,單位為KB,非必需,無默認值

minWidth:?100,?//?圖片寬度最小限制,單位為px,非必需,無默認值

minHeight:?100,?//?圖片高度最小限制,單位為px,非必需,無默認值

maxWidth:?2000,?//?圖片寬度最大限制,單位為px,非必需,無默認值

maxHeight:?2000,?//?圖片高度最大限制,單位為px,非必需,無默認值

limitedWidth:?800,?//?圖片寬度要求,單位為px,非必需,無默認值

limitedHeight:?800,?//?圖片高度要求,單位為px,非必需,無默認值

data:?["1.png",?"2.jpg"],?//?編輯模式下初始顯示的圖片路徑,非必需,無默認值

}

更新時間：2020/9/8 下午3:56:56

更新說明：

1. 優化部分細節

2. 添加了Form表單提交的示例(需要在php環境下運行)

3. 新增圖片排序功能

更新時間：2020-09-05?17:11:02

更新說明：

1. 添加多圖選擇，可同時選擇多張圖片添加到html

2. 添加異步上傳，新增url參數，用戶添加圖片后，可立即上傳圖片到url接口，并將接口返回的路徑顯示在html上。文檔提供php實例

參數更新：{

ele:?"#cupload",?//?實例化的DOM對象id,必需

name:?"image",?//?圖片input的name名,非必需,默認為image

num:?1,?//?可上傳圖片的數量,非必需,默認為1

url:?'./upload.php'?//異步上傳接口，非必需，無默認值。請保證接口的正確性

width:?148,?//?預覽框的寬,單位為px,非必需,默認為148

height:?148,?//?預覽框的高,單位為px,非必需,默認為148

minSize:?1024,?//?圖片大小最小限制,單位為KB,非必需,無默認值

maxSize:?2048,?//?圖片大小最大限制,單位為KB,非必需,無默認值

limitedSize:?2048,?//?圖片大小要求,單位為KB,非必需,無默認值

minWidth:?100,?//?圖片寬度最小限制,單位為px,非必需,無默認值

minHeight:?100,?//?圖片高度最小限制,單位為px,非必需,無默認值

maxWidth:?2000,?//?圖片寬度最大限制,單位為px,非必需,無默認值

maxHeight:?2000,?//?圖片高度最大限制,單位為px,非必需,無默認值

limitedWidth:?800,?//?圖片寬度要求,單位為px,非必需,無默認值

limitedHeight:?800,?//?圖片高度要求,單位為px,非必需,無默認值

data:?["1.png",?"2.jpg"],?//?編輯模式下初始顯示的圖片路徑,非必需,無默認值

}

更新時間：2020-08-31?22:07:23

更新說明：

1. 修復部分bug

2. 添加放大預覽功能

3. 介紹：該方法將圖片轉為base64格式存到了input中，用戶只要使用普通form表單直接提交即可，其中 name參數可以設置提交的input的name值，后臺接收form表單的參數后，該圖片數據格式為數組，只要循環將base64數據轉為圖片存到本地即可。

更新時間：2020-01-11 00:24:17

使用方法

引入js：

在需要的位置添加html：

實例化cupload對象：

var?cuploadCreate?=?new?Cupload({

ele:?'#cupload-create',

num:?3,

});

var?cuploadUpdate?=?new?Cupload({

ele:?'#cupload-update',

num:?3,

data:?["static/image/1.png",?"static/image/2.png",?"static/image/3.png"],

});

可選參數

為方便比較和計算,部分參數為number型,已設置默認單位,不可再帶單位。{

ele:?"#cupload",?//?實例化的DOM對象id,必需,默認為cupload

name:?"image",?//?圖片input的name名,非必需,默認為image

num:?1,?//?可上傳圖片的數量,非必需,默認為1

width:?148,?//?預覽框的寬,單位為px,非必需,默認為148

height:?148,?//?預覽框的高,單位為px,非必需,默認為148

minSize:?1024,?//?圖片大小最小限制,單位為KB,非必需,無默認值

maxSize:?2048,?//?圖片大小最大限制,單位為KB,非必需,無默認值

limitedSize:?2048,?//?圖片大小要求,單位為KB,非必需,無默認值

minWidth:?100,?//?圖片寬度最小限制,單位為px,非必需,無默認值

minHeight:?100,?//?圖片高度最小限制,單位為px,非必需,無默認值

maxWidth:?2000,?//?圖片寬度最大限制,單位為px,非必需,無默認值

maxHeight:?2000,?//?圖片高度最大限制,單位為px,非必需,無默認值

limitedWidth:?800,?//?圖片寬度要求,單位為px,非必需,無默認值

limitedHeight:?800,?//?圖片高度要求,單位為px,非必需,無默認值

data:?["1.png",?"2.jpg"],?//?編輯模式下初始顯示的圖片路徑,非必需,無默認值

}

總結

以上是生活随笔為你收集整理的cupload怎么保存图片_原生js的图片上传插件cupload的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。