Question

您好我正在尝试使用ajax.so进行图片上传。这是我的文件。

//index.html 
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>File Upload showing Upload Progress</title>
    <style>
        * {
            font-family: Verdana;
            font-size: 12px;
        }
    </style>
</head>
<body>


<form action="/upload" method="post" enctype="multipart/form-data" id="MyUploadForm">
<input name="ImageFile" id="imageInput" type="file" />
<input type="submit"  id="submit-btn" value="Upload" />
<img src="images/ajax-loader.gif" id="loading-img" style="display:none;" alt="Please Wait"/>
</form>
<div id="output"></div>

    <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.min.js'></script>
    <script type='text/javascript' src='main.js'></script>
</body>
<script type="text/javascript" src="js/jquery.form.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    var options = {
            target:   '#output',   // target element(s) to be updated with server response
            beforeSubmit:  beforeSubmit,  // pre-submit callback
            resetForm: true        // reset the form after successful submit
        };

     $('#MyUploadForm').submit(function() {
            $(this).ajaxSubmit(options);  //Ajax Submit form           
            // return false to prevent standard browser submit and page navigation
            return false;
        });
});

//function to check file size before uploading.
function beforeSubmit(){
    //check whether browser fully supports all File API
   if (window.File && window.FileReader && window.FileList && window.Blob)
    {

        if( !$('#imageInput').val()) //check empty input filed
        {
            $("#output").html("Are you kidding me?");
            return false
        }

        var fsize = $('#imageInput')[0].files[0].size; //get file size
        var ftype = $('#imageInput')[0].files[0].type; // get file type


        //allow only valid image file types
        switch(ftype)
        {
            case 'image/png': case 'image/gif': case 'image/jpeg': case 'image/pjpeg':
                break;
            default:
                $("#output").html("<b>"+ftype+"</b> Unsupported file type!");
                return false
        }

        //Allowed file size is less than 1 MB (1048576)
        if(fsize>1048576)
        {
            $("#output").html("<b>"+fsize +"</b> Too big Image file! <br />Please reduce the size of your photo using an image editor.");
            return false
        }

        $('#submit-btn').hide(); //hide submit button
        $('#loading-img').show(); //hide submit button
        $("#output").html("");  
    }
    else
    {
        //Output error to older unsupported browsers that doesn't support HTML5 File API
        $("#output").html("Please upgrade your browser, because your current browser lacks some new features we need!");
        return false;
    }
}

</script>

</html>

这是我的app.js

var express = require('express');   //Express Web Server 
var bodyParser = require('body-parser'); //connects bodyParsing middleware
var formidable = require('formidable');
var path = require('path');     //used for file path
var fs =require('fs-extra');    //File System-needed for renaming file etc

var app = express();
app.use(express.static(path.join(__dirname, 'public')));

app.set('views', __dirname + '/views');
app.engine('html', require('ejs').renderFile);
/* ========================================================== 
 bodyParser() required to allow Express to see the uploaded files
============================================================ */
app.use(bodyParser({defer: true}));

app.route('/').get(function(req,res)
{
    console.log("Hello world");
     res.render('index.html');
     res.end('done');
    });

app.post('/upload', function(req, res) {
    res.send('fileinfo: ' + req.files);
});

var server = app.listen(3030, function() {
console.log('Listening on port %d', server.address().port);
});

但是我的req.files未定义。任何人都可以告诉我为什么？任何人都可以解决我的scnario.Am我做的一切都正确。

Answer 1

以下是express-formidable-demo page的引文：

目前因未知错误而被破坏

但是，您可以明确地解析请求主体：

app.post('/upload', function(req, res) {
    var form = new formidable.IncomingForm();
    form.parse(req, function(err, fields, files) {
        console.log(files);
        res.send('fileinfo: ' + files);
    });
});

带节点和快递的图像文件上传

1 个答案: