Javascript Node js如何处理文件响应_Javascript_Node.js_Express

Javascript Node js如何处理文件响应

javascript node.js express

Javascript Node js如何处理文件响应,javascript,node.js,express,Javascript,Node.js,Express,嗨，我正在尝试做ajax图像上传。这是我到目前为止所做的工作 my index.html： //index.html <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>File Upload showing Upload Progress</title> <style> * {

嗨，我正在尝试做ajax图像上传。这是我到目前为止所做的工作

my index.html： //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(){
    alert('ok');
    //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>

我在服务器端得到以下响应：

   { ImageFile: 
       { domain: null,
         _events: {},
         _maxListeners: undefined,
         size: 238027,
         path: '/tmp/a7b06a71ff10de78cc8b941b18762b73',
         name: 'bg.jpg',
         type: 'image/jpeg',
         hash: null,
         lastModifiedDate: Sun Jun 01 2014 04:05:57 GMT+0530 (IST),
         _writeStream: 
          { _writableState: [Object],
            writable: true,
            domain: null,
            _events: {},
            _maxListeners: undefined,
            path: '/tmp/a7b06a71ff10de78cc8b941b18762b73',
            fd: null,
            flags: 'w',
            mode: 438,
            start: undefined,
            pos: undefined,
            bytesWritten: 238027,
            closed: true } } }

现在我想知道。如何将此文件移动到上载文件夹。当我提交它时，它会进入另一个页面。我想在不重新加载的情况下执行它。在节点中有什么方法吗？提前感谢。

fs extra

模块具有

移动

方法。像这样使用它：

app.post('/upload', function(req, res) {
    var form = new formidable.IncomingForm();
    form.parse(req, function(err, fields, files) {
        fs.move(files.ImageFile.path, __dirname + '/upload/' + files.ImageFile.name, function(err) {
            if (err) return console.log(err);

            console.log('Moved successfully');
        });
        res.send('fileinfo: ' + files);
    });
});

因此，上载的文件将以原始名称显示在

upload

文件夹中。有两个注意事项：

```
上传
```
文件夹应存在
如果具有该名称的文件已经存在，它将不会被覆盖，因此您可能应该在每次上载时生成一个唯一的文件名（用您的唯一文件名替换
```
files.ImageFile.name
```
）

app.post('/upload', function(req, res) {
    var form = new formidable.IncomingForm();
    form.parse(req, function(err, fields, files) {
        fs.move(files.ImageFile.path, __dirname + '/upload/' + files.ImageFile.name, function(err) {
            if (err) return console.log(err);

            console.log('Moved successfully');
        });
        res.send('fileinfo: ' + files);
    });
});