ajax多图片上传+nodejs+express

最新推荐文章于 2022-07-26 20:28:22 发布

weixin_42975115

最新推荐文章于 2022-07-26 20:28:22 发布

阅读量415

点赞数 1

分类专栏： nodejs ajax 多图上传

本文链接：https://blog.csdn.net/weixin_42975115/article/details/89325644

版权

nodejs 同时被 3 个专栏收录

21 篇文章 0 订阅

订阅专栏

ajax

2 篇文章 0 订阅

订阅专栏

多图上传

1 篇文章 0 订阅

订阅专栏

upload
注意事项

修改post请求路径
laye.alert()修改为alert();因为这里用的插件是自己写的
安装好相关nodejs npm

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title></title>

<style>

    .add_div {
        width: 400px;
        height: 400px;
    }

    .file-list {
        height: 125px;
        display: none;
        list-style-type: none;
    }

    .file-list img {
        max-width: 70px;
        vertical-align: middle;
    }

    .file-list .file-item {
        margin-bottom: 10px;
        float: left;
        margin-left: 20px;
    }


    .file-list .file-item .file-del {
        display: block;
        margin-left: 20px;
        margin-top: 5px;
        cursor: pointer;
    }
   .re_img_child{
    padding: 10px;
    border-radius: 10px;
    border:3px dashed #ccc;
   }

</style>

</head>
<body>

<div class="add_div">
    <p>
        <span>商品id</span>
        <input type="text" name="" id="gid" value="">
    </p>
    <p>
        <span>选着替换文件图片：</span>
        <input type="file" name="" id="choose-file" multiple="multiple">
        <!--<input type="file" name="" id="choose-file" />-->
    </p>
    <p>
    <ul class="file-list ">

    </ul>
    </p>
    <input style="cursor: pointer;margin-left: 150px;" type="button" value="上传" href="javascript:;" id="upload"/>
    <div class="re_img_child">

    </div>
</div>
<script src="js/jquery.min.js"></script>
<script src="layer/layer.js"></script>
<script type="text/javascript">
    function pushId(self) {
        // body...
        $("#gid").val(self);//商品id赋值
    }
    function initfileList(object,opration) {
            // body...
            // console.log(JSON.stringify(object)[0] )
            if(object!="up"){
                for(let i in object[0]){
                $(".re_img_child").append('<span style="border:solid red px; margin:5px 5px;" class="file-item"><img src="' + object[0][i] + '" alt="" height="70"></span>');
                console.log(object[0][i]);
            } 
               console.log(opration);
            }else{
                $(".re_img_child").children().remove();
            }
            
            $("#upload").val(opration);
        }
</script>
<script>
    $(function () {
        图片上传//
        //声明变量
        var $button = $('#upload'),
            //选择文件按钮
            $file = $("#choose-file"),
            //回显的列表
            $list = $('.file-list'),
            //选择要上传的所有文件
            fileList = [];
        //当前选择上传的文件
        var curFile;
        // 选择按钮change事件，实例化fileReader,调它的readAsDataURL并把原生File对象传给它，
        // 监听它的onload事件，load完读取的结果就在它的result属性里了。它是一个base64格式的，可直接赋值给一个img的src.
        $file.on('change', function (e) {
            //上传过图片后再次上传时限值数量
            var numold = $('li').length;
            if(numold >= 4){
                layer.alert('最多上传4张图片');
                return;
            }
            //限制单次批量上传的数量
            var num = e.target.files.length;
            var numall = numold + num;
            if(num >4 ){
               layer.alert('最多上传4张图片');
               return;
            }else if(numall > 4){
                layer.alert('最多上传4张图片');
                return;
            }
            //原生的文件对象，相当于$file.get(0).files;//files[0]为第一张图片的信息;
            curFile = this.files;
            console.log(this.files);
            //curFile = $file.get(0).files;
            //console.log(curFile);
            //将FileList对象变成数组
            fileList = fileList.concat(Array.from(curFile));
            //console.log(fileList);
            for (var i = 0, len = curFile.length; i < len; i++) {
                reviewFile(curFile[i])
            }
            $('.file-list').fadeIn(2500);
        })


        function reviewFile(file) {
            //实例化fileReader,
            var fd = new FileReader();
            //获取当前选择文件的类型
            var fileType = file.type;
            //调它的readAsDataURL并把原生File对象传给它，
            fd.readAsDataURL(file);//base64
            //监听它的onload事件，load完读取的结果就在它的result属性里了
            fd.onload = function () {
                if (/^image\/[jpeg|png|jpg|gif]/.test(fileType)) {
                    $list.append('<li style="border:solid red px; margin:5px 5px;" class="file-item"><img src="' + this.result + '" alt="" height="70"><span class="file-del">删除</span></li>').children(':last').hide().fadeIn(2500);
                } else {
                    $list.append('<li class="file-item"><span class="file-name">' + file.name + '</span><span class="file-del">删除</span></li>')
                }

            }
        }

        //点击删除按钮事件：
        $(".file-list").on('click', '.file-del', function () {
            let $parent = $(this).parent();
            console.log($parent);
            let index = $parent.index();
            fileList.splice(index, 1);
            $parent.fadeOut(850, function () {
                $parent.remove()
            });
            //$parent.remove()
        });
        //点击上传按钮事件：
        $button.on('click', function () {
            var gid = $('#gid').val();
            if (gid == '') {
                layer.alert('请输入商品id');
                return;
            }
            if(fileList.length!=4){
               layer.alert('请插入4个商品图片');
                return;
            }
             if(fileList.length > 4){
                    layer.alert('最多允许上传4张图片');
                    return;
            }
            else {
                var formData = new FormData();
                for (var i = 0, len = fileList.length; i < len; i++) {
                     // console.log(fileList[i]);
                     // console.log(fileList)
                    formData.append('upfile', fileList[i]);
                    
                }
                let opration = $("#upload").val();
                // console.log(name);
                formData.append('gid',gid);
                formData.append("opration",opration);
                       $.ajax({
                        url: '/img_child_upload',
                        type: 'post',
                        data: formData,
                        dataType: 'json',
                        processData: false,
                        contentType: false,
                        async : true,
                        success: function (data) {
                           $('.file-list').children().remove();
                            // 初始化列表
                            fileList =[];
                            $(".re_img_child").children().remove();
                            console.log(data[0]);
                            for(let i in data[0]){
                                $(".re_img_child").append('<span style="border:solid red px; margin:5px 5px;" class="file-item"><img src="' + data[0][i] + '" alt="" height="70"></span>');
                            }
                            
                            layer.alert("更新成功");
                         },
                         error:function(result){
                             // //console.log(fileList);
                             // console.log(result.)
                             $('.file-list').children().remove();
                                // 初始化列表
                                fileList =[];
                             layer.alert(result.responseText);
                             
                         }
                })
            }
        })
    })
</script>
</body>
</html>

img_child_upload

var express = require('express');                                                                                                                                                                                                                                           
var router = express.Router();
var multiparty = require('multiparty');
var util = require('util');
var fs = require('fs');
var path = require('path');
var Data = require("../../config/db.js");
var C_img = new Data();
router.get('/', function(req, res, next){
    res.send("ok");
});
/* 商品插入 */
router.post('/', function(req, res, next){
  console.log("进入子图操作"+'&&'+'执行时间'+new Date().toLocaleString());
   // 插入图片操作
    //生成multiparty对象，并配置上传目标路径
      var form = new multiparty.Form({uploadDir: './public/goods/'});
      var data = [];
      var updata =[];
      //上传完成后处理
      form.parse(req, function(err, fields, files) {
          // console.log(fields);
          var filesTmp = JSON.stringify(files,null,2);
          if(err){
            console.log('parse error: ' + err);
          }
          else 
          {
             console.log('parse files: ' + filesTmp);
              var inputFile = files.upfile;
              for(let i in inputFile){
                  var uploadedPath = inputFile[i].path;
                  var dstPath = './public/goods/' + inputFile[i].originalFilename;
                  var portpath = '/goods/' + inputFile[i].originalFilename;
                  // console.log(uploadedPath);
                   // console.log(dstPath);
                   data.unshift(portpath);
                   updata.unshift(portpath);
                  //重命名为真实文件名
                  fs.rename(uploadedPath, dstPath, function(err) {
                    if(err){
                      console.log('rename error: ' + err);
                    } else {
                      console.log('rename ok');
                      
                    }
                 });
            }
          }
          // util.inspect({fields: fields, files: filesTmp});
          // console.log(data);
          data.unshift(fields.gid[0]);
          console.log(data);
          console.log(fields.opration[0]);
          C_img.sel_child_img(fields.gid[0],function (err,result) {
            // body...
            if(fields.opration[0]=="上传"){
              if(result.length>0){
              console.log("该商品图片已经插入");
              res.send("该商品图片已经插入");
              return;
            }else{
              C_img.child_img_up(data,function (err,result) {
                // body...
                res.send("上传成功");
              })
             }
            }else{
              console.log("更新子图操作");
              updata.push(fields.gid[0]);
              console.log(updata);
               // 清空资源库图片减少图片冗余        
               C_img.img_update_child(updata,function(err,result){
                  C_img.push_child_img(fields.gid[0],function(err,result){
                      console.log(JSON.stringify(result));
                      res.send(JSON.stringify(result));
                  });
               })
            }
            
          })
          
        // 定义操作数据
      });
});

module.exports = router;

weixin_42975115

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
ajax多图片上传+nodejs+express

upload注意事项修改post请求路径laye.alert()修改为alert();因为这里用的插件是自己写的安装好相关nodejs npm<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/html"><head><meta charset="UTF-8"&gt...
复制链接

扫一扫