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

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

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

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

name:?"image",?//?圖片input的name名,非必需,默認(rèn)為image

num:?1,?//?可上傳圖片的數(shù)量,非必需,默認(rèn)為1

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

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

width:?148,?//?預(yù)覽框的寬,單位為px,非必需,默認(rèn)為148

height:?148,?//?預(yù)覽框的高,單位為px,非必需,默認(rèn)為148

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

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

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

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

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

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

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

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

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

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

}

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

更新說明：

1. 優(yōu)化部分細(xì)節(jié)

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

3. 新增圖片排序功能

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

更新說明：

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

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

參數(shù)更新：{

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

name:?"image",?//?圖片input的name名,非必需,默認(rèn)為image

num:?1,?//?可上傳圖片的數(shù)量,非必需,默認(rèn)為1

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

width:?148,?//?預(yù)覽框的寬,單位為px,非必需,默認(rèn)為148

height:?148,?//?預(yù)覽框的高,單位為px,非必需,默認(rèn)為148

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

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

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

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

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

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

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

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

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

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

}

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

更新說明：

1. 修復(fù)部分bug

2. 添加放大預(yù)覽功能

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

更新時間：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"],

});

可選參數(shù)

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

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

name:?"image",?//?圖片input的name名,非必需,默認(rèn)為image

num:?1,?//?可上傳圖片的數(shù)量,非必需,默認(rèn)為1

width:?148,?//?預(yù)覽框的寬,單位為px,非必需,默認(rèn)為148

height:?148,?//?預(yù)覽框的高,單位為px,非必需,默認(rèn)為148

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

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

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

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

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

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

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

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

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

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

}

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。