上传文件 upload file

使用jQuery.form插件,实现完美的表单异步提交

表单的异步提交,现在不需要

jQuery插件之ajaxFileUpload

可以传递各种文件类型,现在需要

ajax form表单提交 input file中的文件

jquery.form,现在不需要

上传图片

之前的方法: formidable,缺点:前端只能通过form type=submit来上传,上传结束后没法控制。
更好的方法:ajaxfileupload+formidable,前端通过js来上传,,后端通过formidable来处理
html




js

jQuery(function($){

  $("#upload").click(function () {
      ajaxFileUpload();
  })
  
});

function ajaxFileUpload() {
    $.ajaxFileUpload
    (
        {
            url: '/file-upload', //用于文件上传的服务器端请求地址
            secureuri: false, //是否需要安全协议,一般设置为false
            fileElementId: 'file1', //文件上传域的ID
            dataType: 'json', //返回值类型 一般设置为json
            success: function (data, status)  //服务器成功响应处理函数
            {
                // 
            },
            error: function (data, status, e)//服务器响应失败处理函数
            {
                alert(e);
            }
        }
    )
    return false;
}

server

router.post('/file-upload', function(req, res, next){

    var form = new formidable.IncomingForm();

    form.uploadDir = "../test/public/images";
    form.parse(req, function(err, fields, files) {
        // 如果有当前的图片,则删除
        fs.exists("../test/public/images/"+files.file.name, function (exists) {

          if(exists){
            fs.unlink("../test/public/images/"+files.file.name, function(data){
            //重命名
                fs.rename(files.file.path, "../test/public/images/"+files.file.name, function(){
                    var result = {
                        status: 0,
                        data: 'upload success'
                    }

                    res.send(JSON.stringify(result));
                });
            })
          }else{
            //重命名
            fs.rename(files.file.path, "../test/public/images/"+files.file.name, function(){
                var result = {
                    status: 0,
                    data: 'upload success'
                }

                res.send(JSON.stringify(result));
            });
          }
      });
    });
});

你可能感兴趣的:(上传文件 upload file)