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

图片上传方式一：使用原生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 });
        });
    });
});