使用node.js预览上传的图像文件

debugcn 发表于 Dev

ceadreak

在express.js应用程序中，我有一个包含一些字段的表单，其中一个是上载图像字段。

当用户浏览其图像文件并选择一个时，我想在提交表单之前在“预览块”中显示此文件。

我想到了这些动作：

点击浏览按钮
选择一个文件
已选择文件=>上载，重命名，调整大小，裁剪并存储在/tmp目录中
在预览块中显示新文件
表单验证=>将重命名的文件移动到适当的应用程序目录中

我正在寻找实现此过程的最佳方法。

瓦伦·查克瓦蒂（Varun Chakervarti）

解决此问题的步骤。

使用输入类型文件的HTML文件。

<input id="upload_images" type="file" multiple="multiple">

将事件侦听器添加到输入类型文件的change事件。

if(document.addEventListener) {
    document.getElementById("upload_images").addEventListener("change", function(e){
        uploadImages(e);
    });
}
else {
    document.getElementById("upload_images").attachEvent("onchange", function(e){
        uploadImages(e);
    });
}

当用户选择文件时，创建一个表单数据，并使用ajax将其发送到服务器（Mutipart数据）。

function uploadImages(e) {
    var uploadedFiles = e.target.files;
    var xhrObj = new XMLHttpRequest();
    xhrObj.open('POST', "<<your node>>/<<request URI>>", true);
    xhrObj.onreadystatechange = function () {
        if(this.readyState == this.DONE) {
            if(this.status != 200) {
                // Show Error
            }
            else {
                var returnedResponse = xhrObj.responseText;
                if(returnedResponse == 'success') { // check your returned data like I was returning "success"
                    // Success - Do the tasks
                }
            }
        }
    };
    var requestFormData = new FormData();
    for(var i=0; i<uploadedFiles.length; i++) {
        requestFormData.append('data', uploadedFiles[i]);
    }
    xhrObj.send(requestFormData);
}

在服务器（nodejs）上，使用强大的功能来接收上载的文件并将其存储在所需的任何位置。

// require formidable
// require imagemagick
function processUploadImages(req, res) {
    var form = new formidable.IncomingForm();
    form.uploadDir = __dirname+'/uploaded_images/;
    form.maxFieldsSize = 20 * 1024 * 1024;
    form.keepExtensions = true;
    form.onPart = function(part) {
        form.handlePart(part);
    }
    form.on('file', function(name, file) {
        // Handle file data like:
        // file.path
        // file.name
    });
    form.on('end', function() {
        //show complete
    });
    form.parse(req, function(error, fields, files) {
        // create thumbnail images
        // return response
    });    
}