使用 jquery-file-upload 插件实现图片上传功能（方式二）

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

【目录】

1. 实现效果

2. 实现步骤

2.1 引入需要的JS文件

jQuery File Upload 需要引入的包

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

2.2 HTML代码

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

    选择图片:
    


    

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 服务端代码

只贴了核心代码。
接收客户端传回的 pic1 做图片保存本地操作
这里我用的 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 });
        });
    });
});