Nodejs分享一个node结合uploadify的异步上传例子。

Nodejs分享一个node结合uploadify的异步上传例子。

服务器端配置: app.js==> app.use(express.bodyParser({ keepExtensions: true, uploadDir: __dirname + ‘/public/upload’})); index.js==>

`exports.upload = function(req, res){

     var fileDesc=req.files;

var imgname=fileDesc.Filedata.name;


 var path=fileDesc.Filedata.path;//这里是本地路径D://upload/..jpg

 var index=path.indexOf(constant.uploadFile);//配置的放置文件的文件夹名字

 var name=path.substring(index);

var imgurl=constant.DomainUrl+":"+constant.DomainPort+"/"+name;


res.send(imgurl);//返回服务器端地址

};`

前台配置: test.js==>

$(function() {
	$('#file_upload').uploadify({
		 'swf'     : '/images/uploadify.swf',
		 'formData':{
	            'userid':'用户id',
	            'username':'用户名',
	            'rnd':'加密密文'
          },
          'cancelImg ':'/images/uploadify-cancel.png',
          'fileTypeExts' : '*.gif; *.jpg; *.png',
          'simUploadLimit ':'2',
		  'uploader' : '/fileupload',
		  'onUploadSuccess' : function(file, data, response) {
		          var img="<img src=\""+data+"\"/>";

                          $("#img_box").append(img);
	        }
});

});

html页面:

<link rel="stylesheet" type="text/css" href="/stylesheets/uploadify.css">
<style type="text/css">
    .input_frame{
    	height: 70px;
    }
    .img{
    	width: 550px;
    	position: absolute;
    	margin-top: 50px;
    }
    .img img{
    	width: 100px;
    	height: 100px;
        margin-left: 10px;
        z-index: -99;
    }
</style>

<div class="input_frame">
   <pre><input type="file" name="file_upload" id="file_upload" /></pre>
      </div>

<div id=“img_box” class=“img”></div>

<script type=“text/javascript” src=“http://code.jquery.com/jquery-1.7.2.min.js”></script> <script type=“text/javascript” src="/javascripts/jquery.uploadify.min.js"></script> <script type=“text/javascript” src="/javascripts/test.js">

</script>

7 回复

Node.js 分享一个 Node 结合 Uploadify 的异步上传例子

服务器端配置

首先，我们需要设置 Express 应用来处理文件上传。这里假设你已经安装了 express 和 multer（一个用于处理 multipart/form-data 的中间件）。

npm install express multer

在你的 app.js 文件中，添加以下代码：

const express = require('express');
const multer = require('multer');
const path = require('path');

const app = express();
const upload = multer({ dest: 'public/uploads/' });

app.post('/fileupload', upload.single('Filedata'), (req, res) => {
    const fileDesc = req.file;
    const imgname = fileDesc.originalname;
    const path = fileDesc.path;
    const domainUrl = 'http://localhost:3000'; // 你的域名和端口
    const imgurl = `${domainUrl}/${path}`;

    res.send(imgurl);
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

前台配置

在前端，你需要引入 jQuery 和 Uploadify 插件，并编写相应的 JavaScript 代码来处理文件上传。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Uploadify Example</title>
    <link rel="stylesheet" type="text/css" href="/stylesheets/uploadify.css">
    <style type="text/css">
        .input_frame {
            height: 70px;
        }
        .img {
            width: 550px;
            position: absolute;
            margin-top: 50px;
        }
        .img img {
            width: 100px;
            height: 100px;
            margin-left: 10px;
            z-index: -99;
        }
    </style>
</head>
<body>
    <div class="input_frame">
        <input type="file" name="file_upload" id="file_upload" />
    </div>
    <div id="img_box" class="img"></div>

    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script src="/javascripts/jquery.uploadify.min.js"></script>
    <script src="/javascripts/test.js"></script>
</body>
</html>

在 test.js 中，配置 Uploadify 插件：

$(function() {
    $('#file_upload').uploadify({
        'swf': '/images/uploadify.swf',
        'formData': {
            'userid': '用户id',
            'username': '用户名',
            'rnd': '加密密文'
        },
        'cancelImg': '/images/uploadify-cancel.png',
        'fileTypeExts': '*.gif; *.jpg; *.png',
        'simUploadLimit': '2',
        'uploader': '/fileupload',
        'onUploadSuccess': function(file, data, response) {
            var img = '<img src="' + data + '" />';
            $("#img_box").append(img);
        }
    });
});

HTML 页面

确保你的 HTML 页面包含必要的样式和脚本链接，如上所示。

这样，你就完成了一个简单的 Node.js 结合 Uploadify 的异步文件上传功能。


求例子源码

楼主代码运行不通啊

路由是exports.upload 但是提交的是 ‘uploader’ : ‘/fileupload’,啊？ 这怎么解释的通呢

这是3的代码。。。。。

奥。我的app.js里面配置的上传路径，是fileupload

以下是结合Node.js和Uploadify实现异步上传的一个简单示例。这个例子包括服务器端（使用Express）和客户端（使用Uploadify插件）的配置。

服务器端配置

首先，安装必要的依赖包：

npm install express body-parser

然后创建一个简单的服务器：

// app.js
const express = require('express');
const bodyParser = require('body-parser');

const app = express();
const port = 3000;

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use('/uploads', express.static('uploads'));

app.post('/upload', (req, res) => {
    const file = req.files.file;
    const filePath = `./uploads/${file.name}`;
    file.mv(filePath, (err) => {
        if (err) return res.status(500).send(err);

        res.send(`http://localhost:${port}/uploads/${file.name}`);
    });
});

app.listen(port, () => console.log(`Server running on port ${port}`));

前端配置

确保在HTML页面中引入了必要的库，并且已经包含了Uploadify的相关配置：

<!-- test.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Upload Example</title>
    <link rel="stylesheet" type="text/css" href="/stylesheets/uploadify.css">
    <script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script src="/javascripts/jquery.uploadify.min.js"></script>
    <script src="/javascripts/test.js"></script>
</head>
<body>
    <div class="input_frame">
        <input type="file" name="file_upload" id="file_upload" />
    </div>
    <div id="img_box" class="img"></div>
</body>
</html>

客户端JavaScript配置

// test.js
$(function() {
    $('#file_upload').uploadify({
        'swf': '/images/uploadify.swf',
        'formData': {
            'userid': '用户id',
            'username': '用户名',
            'rnd': '加密密文'
        },
        'cancelImg': '/images/uploadify-cancel.png',
        'fileTypeExts': '*.gif; *.jpg; *.png',
        'simUploadLimit': '2',
        'uploader': '/upload',
        'onUploadSuccess': function(file, data, response) {
            var img = "<img src=\"" + data + "\"/>";
            $("#img_box").append(img);
        }
    });
});

解释

  • 服务器端：使用Express处理文件上传，并将文件保存到指定目录。上传成功后返回文件的URL。
  • 客户端：通过Uploadify插件进行文件选择和上传，成功后在页面上显示图片。

这样就完成了一个简单的异步文件上传功能。

回到顶部