使用 jquery-file-upload 插件实现图片上传功能

原创已于 2023-09-20 13:39:58 修改 · 9.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #fileupload插件 #图片上传插件 #node.js

于 2019-02-16 20:40:35 首次发布

jquery 同时被 2 个专栏收录

14 篇文章

订阅专栏

nodejs

9 篇文章

订阅专栏

本文介绍如何使用jQuery File Upload插件实现图片上传功能，包括引入必要库、HTML结构、JS配置及Node.js服务端代码。通过具体示例，展示了如何设置文件输入框、调用插件函数及服务器端处理图片上传。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图片上传方式一：使用原生ajax formData 的方式上传

1. 实现效果

在这里插入图片描述

2. 实现步骤

2.1 引入需要的js三方库

jQuery File Upload 需要引入的包

jQuery库，建议jQuery 1.8以上版本
js/vendor/jquery.ui.widget.js ： jQuery UI Widget
js/jquery.iframe-transport.js ：扩展iframe数据传输
js/jquery.fileupload.js ： jQuery File Upload核心类
js/cors/jquery.xdr-transport.js 在IE下应载入此文件解决跨域问题（看需求，不是必须）

<script src="lib/jquery/jquery.js"></script>
<script src="lib/jquery-fileupload/jquery.ui.widget.js"></script>
<script src="lib/jquery-fileupload/jquery.iframe-transport.js"></script>
<script src="lib/jquery-fileupload/jquery.fileupload.js"></script>

2.2 HTML代码

name 属性的作用插件会读取这个属性，传到服务器以这个属性的值作为文件的对象的键
data-url 就是后台上传图片接口的API

<div class="input-group ">
    <span class="input-group-addon" id="sizing-addon1">选择图片:</span>
    <input type="file" class="form-control select-img" name="pic1" data-url="/category/addSecondCategoryPic" >
</div>
<div class="input-group ">
    <img src="images/1.png" alt="" class="show-img">
</div>

2.3 js代码

获取了文件框的元素调用fileupload函数即可只要引入了插件 jquery对象上都会有这个函数就可以调用

$('.select-img').fileupload({
    success: function (data) {
    	// 图片预览操作
        $('.show-img').attr('src', data.picAddr);
    }
});

or 也可以使用官方推荐的 done 方法（done 比success更加强大可以支持Promise提交）

$('.select-img').fileupload({
    done:function (e,data){
    	$('.show-img').attr('src', data.result.picAddr);
    } 
});

2.4 node.js 服务端代码（核心代码）

这里我用的 files.pic1 接收，所以客户端必须根据 pic1 传参数到服务端。

var file = files.pic1;

router.post("/addSecondCategoryPic", function (req, res) {
    //创建表单上传
    var form = new formidable.IncomingForm();
    //设置编辑
    form.encoding = 'utf-8';
    //设置文件存储路径
    form.uploadDir = "public/upload/brand";
    //保留后缀
    form.keepExtensions = true;
    //设置单文件大小限制 2m
    form.maxFieldsSize = 2 * 1024 * 1024;
    //form.maxFields = 1000;  设置所以文件的大小总和
    form.parse(req, function (err, fields, files) {
        var file = files.pic1;
        let picName = uuid.v1() + path.extname(file.name);
        fs.rename(file.path, 'public\\upload\\brand\\' + picName, function (err) {
            if (err) return res.send({ "error": 403, "message": "图片保存异常！" });
            res.send({ "picAddr": '/upload/brand/' + picName });
        });
    });
});