js 通过ajax实现图片上传并预览并提交到服务器（方式一）

图片上传方式二：使用jquery fileUpload插件上传图片

1. 实现效果

2. 实现步骤

1. 先有一个文件域，用于选择文件
2. 使用文件域的change事件 在文件选择发生变化的时候去获取文件对象
3. 文件本身不能直接传递 使用formdata对象传递
4. 使用ajax 请求 和之前post请求一样 传递一个参数data值就是当前formdata
5. 还需要3个必须的配置 （因为是文件是上传和普通参数对象的处理方式不一样）
   5.1. cache: false, //上传文件不需要缓存
   5.2. processData: false, // 告诉jQuery不要去处理发送的数据
   5.3. contentType: false, // 告诉jQuery不要去设置Content-Type请求头
6. 如果上传成功 在success回调函数里面 接收后台返回内容，设置src预览即可。

3. demo 代码

3.1 HTML代码

我使用的 bootstrap 模态框写的简单页面，以下是核心代码。其他关系不大的具体的html代码就不贴出来了。
准备一个 file 文本域和一个 img 标签，用作图片预览。

<div class="form-group">
    <label>选择图片：</label>
    <div>
        <input type="file" class="form-control brandPic" id="brandPic">
        <img class="head-img">
    </div>
</div>

3.2 JS代码

获取你当前选择的文件 使用change事件 在文件选择发生变化的时候去获取文件对象。

其次：需要一个服务器的上传文件接口。

通过formData实现文件上传

返回的data 就是图片路径，设置图片预览

$('#brandPic').on('change',function(){
    // 如果没有选择图片 直接退出
    if(this.files.length <=0){
        return false;
    }
    // 图片上传到服务器
    var pic1 = this.files[0];
    var formData = new FormData();
    // 服务端要求参数是 pic1 
    formData.append('pic1',pic1);
    $.ajax({
        url:'/category/addSecondCategoryPic',
        type:'post',
        data:formData,
        cache: false, //上传文件不需要缓存
        processData: false, // 告诉jQuery不要去处理发送的数据
        contentType: false, // 告诉jQuery不要去设置Content-Type请求头
        success:function(data){
        	console.log(data);
            // 设置图片预览功能
            $('.head-img').attr('src',data.picAddr);
        }
    })
})

3.3 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 });
        });
    });
});