简介
cloudinary-jquery-file-upload 是一个基于 jQuery 和 Cloudinary 的前端图片上传库，它可以方便地将用户上传的图片直接上传到 Cloudinary 云存储中，并返回图片的 URL 地址。
安装
通过 npm 安装：
npm install cloudinary-jquery-file-upload --save
使用步骤
- 在 HTML 中引入必要的文件：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.ui.widget/1.11.2/jquery.ui.widget.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.iframe-transport/1.8.2/jquery.iframe-transport.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.fileupload/9.29.2/js/jquery.fileupload.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/cloudinary-jquery-file-upload/2.3.0/js/jquery.cloudinary.js"></script>
- 初始化 Cloudinary：
$.cloudinary.config({
cloud_name: 'your_cloud_name',
api_key: 'your_api_key'
});- 创建上传表单：
<form id="upload-form" method="post" enctype="multipart/form-data"> <input type="file" name="file" id="file" /> </form>
- 添加上传逻辑：
$('#file').cloudinary_fileupload({
formData: {
timestamp: Date.now() / 1000 | 0,
upload_preset: 'your_upload_preset',
signature: 'your_signature'
}
});其中，timestamp 和 signature 需要在服务端生成。上传预设（upload_preset）可以在 Cloudinary 控制台中设置。
示例
这里提供一个完整的使用示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------- ------ ---- --------------
------- -----------------------------------------------------------
------- ------------------------------------------------------------------------------------------------
------- -------------------------------------------------------------------------------------------------------------
------- -----------------------------------------------------------------------------------------------------
------- ------------------------------------------------------------------------------------------------------------
--------
---------------------
----------- ------------------
-------- --------------
---
------------ -
----------------------------------
--------- -
---------- ---------- - ---- - --
-------------- ---------------------
---------- ----------------
--
----- ----------- ----- -
-------------------------
-
---
---
---------
-------
------
----- ---------------- ------------- ------------------------------
------ ----------- ----------- --------- --
-------
-------
-------总结
通过本文，我们学习了如何使用 npm 包 cloudinary-jquery-file-upload 实现前端的图片上传功能，并提供了详细的代码示例和使用说明。希望本文能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/39260